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內的元素就會被拉伸多少倍。即：
$\frac{60}{1200} \ = \ 20 \\ \frac{30}{600} \ = 20$

可以看出viewBox的寬高都被拉伸了20倍，那麼只需要將viewBox內的元素的寬高都乘於20即可求出實際的寬高。