SVG的viewBox

SVG中有个viewBox的概念。而要解释这个概念，则需看一个例子。

<svg height="800" width="600" viewBox="0 0 60 80" style="border:1px solid #ff0000">
    <rect height="40" width="30" fill="#abcdef"/>
svg>

首先是svg标签内的height、width属性，很明显，这是用来定义svg图片的宽高的属性。在不显式写出单位的情况下，默认单位是像素（px）。

然后是style属性，熟悉HTML和CSS的朋友看到这里就能发现这是熟悉的味道，不必赘述。

最后就是viewBox属性，这个属性也叫“视区盒子”。可以吧svg理解成电脑的屏幕，而viewBox就是屏幕上的某块区域，拥有自己的位置和宽高属性。而设置这个属性最终的效果将会是viewBox被拉伸到全屏显示。显然，viewBox内的元素也会被放大
。

viewBox的语法以上面的代码为例，viewBox="0 0 60 80"。从左到右分别是（坐标原点为svg的左上角），左上角横坐标、左上角纵坐标、宽度、高度。

举个例子：

---

还有一个问题，如上面的代码，那么最终显示出来的方块的实际宽高是多少呢？

答案是宽为600px，高为400px。

这是因为viewBox最终会被拉伸至全屏。所以，viewBox的宽高分别被拉伸了多少倍，viewBox内的元素就会被拉伸多少倍。即：
$$\begin{gathered} \frac{60}{1200}=20 \\ \frac{30}{600}=20 \end{gathered}$$

可以看出viewBox的宽高都被拉伸了20倍，那么只需要将viewBox内的元素的宽高都乘于20即可求出实际的宽高。