關於SVG的viewBox

在SVG中,經過svg標記的 width和height能夠規定這段SVG代碼所表達的數據在繪製時所佔用的空間大小

以下代碼svg設置了寬度與高度，rect一樣，因此結果天然是全屏

<svg width="200" height="150" style="border:1px solid #cd0000;">
    <rect width="200" height="150" fill="#cd0000" />
</svg>

 

 

考慮下，是否是這段SVG代碼中所表達的數據所有都可被繪製出來達到可見呢?

svg出現了一個新的概念：viewBox

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

viewBox參數

viewBox="x, y, width, height" // x:左上角橫座標，y:左上角縱座標，width:寬度，height:高度

代碼稍微修正下，增長viewBox控制

<svg width="200" height="150" viewBox="0,0,400,300" style="border:1px solid #cd0000;">
    <rect width="200" height="150" fill="#cd0000" />
</svg>

rect一樣與svg尺寸一直，可是顯示出來的大小確等比縮小了一倍

試着簡單的理解：強制把分辨率提高到400*300 ，那麼原來的svg尺寸是200*150，相對於400*300就等比縮小一倍了

一樣的，若是把viewBox縮小一倍，那麼反之svg會增長一倍

<svg width="200" height="200" viewBox="0,0,100,100" style="border:1px solid #cd0000;">
    <rect width="200" height="200" fill="#cd0000" />
</svg>