今天在學習clip-path屬性的時候，遇到了<svg>元素的viewBox這個屬性。網上了解了下，發現一開始不好理解，現在搞清楚了記錄一下。由於直接定義，反而很模糊，所以這里先做一些實驗性的觀察，再做描述。
預備代碼：
<body>
<svg height="200" width="200" viewBox="0 0 200 200">
<path xmlns="http://www.w3.org/2000/svg" d="m65.734 32.469c9.375-5.0234 16.742-4.6602 28.379-6.0625-10.992 7.2695-15.949 7.4453-21.719 16.277 10.629 0.33594 16.832 4.3359 27.605 8.9414-13.156 0.80078-17.535-1.5234-26.949 3.2383 9.0391 5.6055 12.41 12.168 19.438 21.547-11.793-5.8828-14.422-10.09-24.957-10.672 5.0234 9.375 4.6602 16.742 6.0625 28.379-7.2695-10.992-7.4453-15.949-16.277-21.719-0.33594 10.629-4.3359 16.832-8.9414 27.605-0.80078-13.156 1.5234-17.535-3.2344-26.949-5.6055 9.0352-12.168 12.41-21.547 19.438 5.8867-11.793 10.09-14.426 10.672-24.957-9.375 5.0234-16.742 4.6602-28.379 6.0625 10.992-7.2695 15.949-7.4453 21.719-16.277-10.629-0.33594-16.832-4.3359-27.605-8.9414 13.156-0.80078 17.535 1.5234 26.949-3.2383-9.0391-5.6055-12.41-12.168-19.438-21.547 11.793 5.8867 14.422 10.09 24.957 10.672-5.0234-9.375-4.6602-16.742-6.0625-28.379 7.2695 10.992 7.4453 15.949 16.277 21.719 0.33594-10.629 4.3359-16.828 8.9414-27.605 0.80078 13.156-1.5234 17.535 3.2344 26.949 5.6055-9.0352 12.168-12.406 21.547-19.438-5.8867 11.793-10.09 14.426-10.672 24.957z" fill-rule="evenodd"/>
</svg>
<style>
svg {
border: 1px solid red;
margin-left: 100px;
margin-top: 100px;
}
</style>
</body>
初始情況下，我們設定了viewBox的值為0 0 200 200
如果把viewBox的值修改為0 0 100 100
<svg height="200" width="200" viewBox="0 0 100 100">
可以看到，這個svg圖形好像是被放大了？ 到底發生了什么呢？實際上是這樣的一個過程：
如果我們把這個黑色的太陽比作一張畫（黃色高亮區域），畫框就是這個帶紅border的固定部分。最開始，畫和畫框的大小完全一致。
現在，看起來，就像是把原來鋪滿整個畫布的畫，長寬剪掉一半，然后拉伸鋪滿畫框。它似乎被放大了。
從屬性的值變換上來看：從
"<svg height="200" width="200" viewBox="0 0 200 200">"
到
"<svg height="200" width="200" viewBox="0 0 100 100">"。
好像是讓原來顯示100%大小圖案的畫框，現在向左上角收縮，只顯示原來的一半大的圖案，但是畫框大小不變，看起來，原來的圖案就像是被放大了一樣。也就是viewBox的這后兩個屬性值用於放大縮小原圖案的渲染尺寸。
接下來，改變另外兩個值試一下：
<svg height="200" width="200" viewBox="0 0 200 200">
到
<svg height="200" width="200" viewBox="50 50 200 200">
看起來，似乎圖案發生了像下圖示的移動。viewBox的前兩個屬性值，從 0 0變化至50 50，似乎，把圖案從左上角（0，0）位置顯示，更改到了（50，50）的位置開始顯示。也就是修改了圖案渲染的起始點。
經過研究觀察，再用自己的話總結一下：
viewBox這個屬性有四個參數值，viewBox = "val1 val2 val3 val4",這四個參數值是前后兩兩成對起作用的。 val1、val2用於定於原圖像的渲染起始位置，分別指定x,y坐標值， val3、val4用於定義原圖像的渲染尺寸，分別指定寬，高。
補充：
我們發現，viewBox這個屬性的屬性值並沒有帶單位。也就是，它是作用尺寸是相對的。 相對原畫布的大小。
<svg height="h" width="w" viewBox="val1 val2 val3 val4">
在上面的例子中：
<svg height="200" width="200" viewBox="50 50 200 200">
高度的相對單位是：h/val4 = 200px/200 = 1px;
寬度的相對單位是：w/val3 = 200px/200 = 1px;
這里的height和width所指定的區域，我們又稱之為viewport。這個例子中，由於viewport和viewBox的大小是一比一，所以，viewport中的1px就是viewport中的1和相對單位。
而在我們的實驗過程中，我們曾經設定了：
<svg height="200" width="200" viewBox="0 0 100 100">
此時：
高度的相對單位是：h/val4 = 200px/100 = 2px;
寬度的相對單位是：w/val3 = 200px/100 = 2px;
<svg height="200" width="200" viewBox="0 0 200 200">
到
<svg height="200" width="200" viewBox="0 0 100 100">
這個變化過程中，圖形變為了原圖案大小的2倍。
文章原文參考