什麽是viewbox？妳看文件會有很多答案，但我覺得把握壹個基本概念就夠了。
Viewbox是我們最終繪圖的坐標系，也就是說我們在svg上畫東西的時候，最終的位置是根據viewbox的坐標系來確定的。
為什麽viewbox這麽難理解？
其實我看了很多文章，但是壹點都不清楚。關於svg本質的書也是霧裏看花，不知所雲。
我覺得可以從以下幾點來理解。
視圖框的定義
當viewbox的縱橫比與viewport的縱橫比相同時，先設置用戶坐標，然後進行繪制。
相同的縱橫比意味著svg設置的width: height等於viewbox設置的width: height。
例如
這裏svg的長寬比為400: 200 = 2。
viewbox設置的長寬比是200: 100 = 2。
所以這裏的長寬比是壹樣的。
表現如下
渲染過程
svg視口的寬度和高度分別為800和600。
視景框的設置寬度和高度分別為0 . 0 800 600。
這裏用戶的坐標是1:1，即用戶坐標的壹個像素對應視口的1個像素。
所以結果如圖所示
表現如下
渲染過程
Svg的視口寬度和高度仍然是800和600。
viewbox的縱橫比變為0 0 400 300。
這裏第壹步是確定用戶坐標，因為設置的用戶坐標是400 * 300，而實際的視口是800和600，所以用戶坐標對應的1像素對應的是視口的兩個像素。
因此，在繪制圖像時，當視框為0 0 800 600時，對應視口的物理像素最初位於用戶坐標為100和100的點處，但當視框為0 0 400 300時，用戶坐標為65438+。
這裏註意，無論是100、100還是100、100，所繪制的圖像的坐標從未改變。改變的是從用戶坐標到svg視口的轉換。
上面介紹了viewbox的寬度和高度，長寬比與viewport相同時，現在我們來介紹長寬比與viewport相同時viewbox的X和Y是如何變化的。
其實原理是壹樣的，還是分兩步走。
a、首先設置用戶坐標，即用戶坐標和svg視口之間的轉換關系，
b .繪制圖像
表現如下
可以看到圖像向左移動了150px。
原理還是按照上面兩個步驟。
1，首先設置用戶坐標，svg為800: 600，viewbox為800:600。
所以這裏的用戶坐標是1:1，然後這裏的用戶坐標會因為設置了viewBox的x而向左移動150，所以無法顯示原來畫在(0，0)到(150，0)用戶坐標範圍內的用戶坐標。
當寬度和高度不同時，首先要有壹個標準，即根據什麽來設置用戶坐標到viewport的轉換，即preserveAspectRatio。
這個長時間不太好理解，不如直接看實際效果圖。
/demos/interactive-SVG-coordinate-system/index . html
可以直接在這裏設置，看看效果。
但是把握大方向
就是先設置用戶坐標，然後再畫。
參考:/2017/03/svg.html