svg的viewport和viewbox

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

相關文章
相關標籤/搜索