在SVG中,通過(guò)svg標(biāo)記的 width和height可以規(guī)定這段SVG代碼所表達(dá)的數(shù)據(jù)在繪制時(shí)所占用的空間大小

如下代碼svg設(shè)置了寬度與高度，rect同樣，所以結(jié)果自然是全屏

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

?

?

考慮下，是不是這段SVG代碼中所表達(dá)的數(shù)據(jù)全部均可被繪制出來(lái)達(dá)到可見呢?

svg出現(xiàn)了一個(gè)新的概念：viewBox

SVG就像是我們的顯示器屏幕，viewBox就是截屏工具選中的那個(gè)框框，最終的呈現(xiàn)就是把框框中的截屏內(nèi)容再次在顯示器中全屏顯示

viewBox參數(shù)

viewBox="x, y, width, height" // x:左上角橫坐標(biāo)，y:左上角縱坐標(biāo)，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尺寸一直，但是顯示出來(lái)的大小確等比縮小了一倍

試著簡(jiǎn)單的理解：強(qiáng)制把分辨率提升到400*300 ，那么原來(lái)的svg尺寸是200*150，相對(duì)于400*300就等比縮小一倍了

同樣的，如果把viewBox縮小一倍，那么反之svg會(huì)增加一倍

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

總結(jié)

以上是生活随笔為你收集整理的关于SVG的viewBox的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。