什麽是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