svg的viewport和viewbox

svg中視區重要的概念

1. viewport  視口，至關於顯示器屏幕

2. viewbox   視區，至關於在屏幕上截取一小塊，放大到整個屏幕，就是特寫的效果

3. preserveAspectRatio  規定viewbox與viewport的對齊方式和縮放方式

viewBox的顯示效果正以下圖：

SVG就像是咱們的顯示器屏幕，viewBox就是截屏工具選中的那個框框，最終的呈現就是把框框中的截屏內容再次在顯示器中全屏顯示。

viewBox的width\height越小，viewBox的效果越明顯。比如咱們截屏工具選中區域越小，後來截屏內容鋪滿屏幕時反差越大。

若是是極端狀況，設置viewBox的width/height的大小和viewpoint也就是svg的width\height同樣大小，那麼即便使用了viewBox，也不會改變原有的效果。

它和沒有給svg使用viewBox時的狀況是同樣的。這和你把一個滿屏截圖鋪滿屏幕顯示是同樣的原理，感覺不到縮放。

 

出處：https://www.oxxostudio.tw/articles/201409/svg-23-viewpoint-viewBox.html

         https://my.oschina.net/710409599/blog/307658