SVG进阶-理解viewBox

viewPort

---

表示SVG可见区域的大小，或者可以想象成舞台大小，画布大小。

<svg width="500" height="300"></svg>

在SVG中，值可以带单位也不可以不带。一个不带单位的值可以在用户空间中通过用户单位声明。如果值通过用户单位声明，那么这个值的数值被认为和px单位的数值一样。这意味着上述例子将被渲染为500px*300px的视窗。

你也可以使用单位来声明值。SVG支持的长度单位有：em，ex，px，pt，pc，cm，mm，in和百分比。

ViewBox

---

viewbox的语法解释 viewBox值有4个数字：

viewBox="x, y, width, height"  // x:左上角横坐标，y:左上角纵坐标，width:宽度，height:高度

iewbox 顾名思义，就是视图盒子的意思，更形象的解释？没有

更形象的解释就是：SVG就像是我们的屏幕，viewBox就是截屏工具选中的那个框框，最终的呈现就是把框框中的截屏内容、

<svg width="400" height="300" viewBox="0,0,40,30" style="border:1px solid #cd0000;">
    <rect x="