svg中視區重要的概念html
1. viewport 視口,至關於顯示器屏幕svg
2. viewbox 視區,至關於在屏幕上截取一小塊,放大到整個屏幕,就是特寫的效果工具
3. preserveAspectRatio 規定viewbox與viewport的對齊方式和縮放方式.net
viewBox的顯示效果正以下圖:htm
SVG就像是咱們的顯示器屏幕,viewBox就是截屏工具選中的那個框框,最終的呈現就是把框框中的截屏內容再次在顯示器中全屏顯示。blog
viewBox的width\height越小,viewBox的效果越明顯。比如咱們截屏工具選中區域越小,後來截屏內容鋪滿屏幕時反差越大。io
若是是極端狀況,設置viewBox的width/height的大小和viewpoint也就是svg的width\height同樣大小,那麼即便使用了viewBox,也不會改變原有的效果。原理
它和沒有給svg使用viewBox時的狀況是同樣的。這和你把一個滿屏截圖鋪滿屏幕顯示是同樣的原理,感覺不到縮放。im
出處:https://www.oxxostudio.tw/articles/201409/svg-23-viewpoint-viewBox.htmlviewport
https://my.oschina.net/710409599/blog/307658