SVG-viewBox屬性詳解

viewBox( x, y, width, height)   

用處：在svg畫布中選擇出一塊區域放大到寬度或高度充滿畫布爲止

(參數x/y能夠理解爲座標爲(x , y)的點(這裏的座標系和數學中的座標系不太同樣,x軸的方向和數學中的x軸方向是同樣的,可是y軸的方向是反過來的)，也就是選取區域的起點，width/height很好理解就是選取區域的寬高)

下面咱們來具體解釋一下上面這句話的意思

css樣式：
　　svg {  border: 1px solid #333333; }

1.svg畫布的寬度和高度都設置成300px寬，而且在畫布裏面畫一個矩形和一個圓形

<svg width="300" height="300">
    <path fill="purple" d="M 0,0 L 100,0 100,100 0,100 Z"></path>
    <circle fill="orange" cx="50" cy="250" r="50"></circle>
</svg>

也就是下面的樣子

2.咱們在svg裏面添加viewBox=(0, 0, 101, 101)
咱們就能看到下面的樣子

注意：這裏我並無選取矩形大小的寬高，而是特地多選取了1px，目的就是爲了方便咱們觀察區域是怎麼選取的，一樣下面的圓形也是如此

3.咱們更改viewBox=(0, 200, 101, 101)
咱們可以看到下面的樣子

在上面的一、二、3條咱們演示的是選擇區域這個用處，接下來咱們看放大是什麼意思

4.接下來咱們更改svg的width 和 height屬性

<svg viewBox="0 0 100 100" width="300" height="300">
    <path fill="purple" d="M 0,0 L 100,0 100,100 0,100 Z"></path>
    <circle fill="orange" cx="50" cy="250" r="50"></circle>
</svg>

當前代碼的樣式表現以下

接着咱們把width屬性改成width="400"，而後樣式就變成了：

咱們把width還原，接着更改height="400",樣式表現爲：

這也就驗證了咱們開篇的第一句話：將選中區域的寬度或高度放大到充滿畫布爲止
有興趣的你們能夠下去試一試




本篇原創