IT工程師數位筆記本

前面的話

　　SVG中坐標系統非常關鍵，但在介紹坐標系統之前，首先要了解視野。本文將詳細介紹SVG視野

視野

　　下面來區分視窗、世界和視野

【視窗】

　　SVG的屬性width、height來控制視窗的大小，也稱為SVG容器

【世界】

　　SVG里面的代碼，就是對SVG世界的定義

【視野】

　　世界是無窮大的，視野是觀察世界的一個矩形區域。如下圖所示

　　世界不可變，而視野是可以改變的。在SVG中，提供了viewBox和preserveAspectRatio屬性來控制視野

viewBox

　　viewBox屬性允許指定一個給定的一組圖形伸展以適應特定的容器元素

　　viewBox屬性的值是一個包含4個參數的列表 min-x, min-y, width and height， 以空格或者逗號分隔開， 在用戶空間中指定一個矩形區域映射到給定的元素

【位置】

　　首先來介紹下viewBox的位置屬性x、y

　　將viewBox的尺寸與SVG容器尺寸設置為相同，并且在SVG中繪制占滿容器尺寸的一個矩形

<svg version="1.1" id="drawing" width="200" height="150" style="border:1px solid #cd0000;" viewbox="0 0 200 150" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="200" height="150" fill="#cd0000" />
</svg>  

　　結果如下圖所示，矩形占滿容器

　　下面改變x、y屬性來查看SVG圖形有何變化

　　由結果所示，當x值為正值時，視野向右移動，由于世界和視窗都不變。所以，看起來好像是圖形向左移動。反之亦然

【尺寸】

　　介紹過位置屬性后，下面以一個例子的形式來解釋viewBox中的width和height屬性

<svg version="1.1" id="drawing" width="200" height="150" style="border:1px solid #cd0000;" viewbox="0 0 40 30" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="5" width="20" height="15" fill="#cd0000"/>
</svg>  

　　結果如下所示

　　如果不看viewBox，一定會覺得詫異。SVG尺寸明明有200*150像素，而小小的<rect>大小只有其1/10，但是顯示出來的圖形占據了大量的區域

　　下面的gif圖，解釋了這種現象的原因

　　因此，SVG里面的圖形等元素的尺寸是依據viewBox的width、height設置來布局的。最終，再把viewBox的尺寸放大到視窗的尺寸大小來顯示

　　下面來解釋下，視窗、世界和視野的關系

　　世界是無窮大的。viewBox的尺寸設置的越大，即視野越大，則可顯示的世界的區域就越大。由于視窗大小是固定的，因此，SVG內部元素尺寸看上去就越小。反之亦然

preserveAspectRatio

　　上面的例子，SVG的寬高比正好和viewBox的寬高比是一樣的，都是4:3。顯然，實際應用viewBox不可能一直跟viewport相同比例。此時，就需要preserveAspectRatio出馬了，此屬性也是應用在<svg>元素上，且作用的對象都是viewBox

　　preserveAspectRatio屬性的值為空格分隔的兩個值組合而成。第一個值表示，viewBox如何與SVG viewport對齊；第二個值表示，如何維持高寬比（如果有）

　　其中，第1個值又是由兩部分組成的。前半部分表示x方向對齊，后半部分表示y方向對齊

值      含義
xMin    viewport和viewBox左邊對齊
xMid    viewport和viewBox x軸中心對齊
xMax    viewport和viewBox右邊對齊
YMin    viewport和viewBox上邊緣對齊。注意Y是大寫。
YMid    viewport和viewBox y軸中心點對齊。注意Y是大寫。
YMax    viewport和viewBox下邊緣對齊。注意Y是大寫。

　　然后，把x和y進行組合，比如xMinYMin、xMidYMin

　　preserveAspectRatio屬性第二部分的值支持下面3個

值      含義
meet    保持縱橫比縮放viewBox適應viewport
slice   保持縱橫比同時比例小的方向放大填滿viewport
none    扭曲縱橫比以充分適應viewport

　　[注意]preserveAspectRatio屬性第二部分的值設置為none時，第一部分的值必須為空，否則報錯

　　如果不設置preserveAspectRatio屬性，默認是xMidYMid、meet屬性

　　下面的例子中，視窗設置為200*150，視野設置為200*100，矩形占滿整個視野

　　由結果所示，設置為meet時，視野的寬高通過按比例縮放，都處于視窗范圍內；設置為slice時，按比例縮放后發生剪切，有些內容超出視窗范圍；設置為none時，視野寬高縮放到視窗的尺寸