關於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>