500px 寬度 eas 寬高 理解 技術 eight 例子 col

一、viewport

　　表示SVG可見區域的大小，或者可以想象成舞臺大小，畫布大小。

<svg width="500" height="300"></svg>

　　上面的SVG代碼定義了一個視區，寬500單位，高300單位。

　　註意這裏的措辭是“單位”，不是“像素”。雖然說，width/height如果是純數字，使用的就是“像素”作為單位的。也就是說，上面SVG的視區大小就是500px * 300px.

　　當然，故弄“單位”這個措辭，潛臺詞就是你可以使用其他類型的單位，涵蓋常見CSS單位。

二、viewBox屬性

　　先看一個例子，如下HTML代碼：

<svg width="400"
 
 height="300" viewBox="0,0,40,30" style="border:1px solid #cd0000;">
    <rect x="10" y="5" width="20" height="15" fill="#cd0000"/>
</svg>

　　結果如下：

　　如果不看viewBox, 你一定會覺得詫異——SVG尺寸明明有400*300像素，而小小的<rect>大小只有其1/20，但是顯示出來的卻占據了半壁江山！不科學啊！

　　之所以小小矩形大顯神威就是這裏的viewBox起了推波助瀾的作用。

　　viewBox值有4個數字：

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

　　viewBox顧名思意是“視區盒子”的意思，好比在說：“SVG啊，要不你就讓我鋪滿你吧~”

　　更形象的解釋就是：SVG就像是我們的顯示器屏幕，viewBox就是截屏工具選中的那個框框，最終的呈現就是把框框中的截屏內容再次在顯示器中全屏顯示！

　　更直觀的解釋：

　　如果沒有viewBox, 應該是長這樣的，<rect>大小只有整個SVG舞臺的1/20。

　　viewBox="0,0,40,30"，相當於在SVG上圈了下圖左上角所示的一個框框。

　　然後把這個框框，連同框框裏的小矩形一起放大到整個SVG大小。

三、preserveAspectRatio

　　上面的例子，SVG的寬高比正好和viewBox的寬高比是一樣的，都是4:3。顯然，實際應用viewBox不可能一直跟viewport穿同一條開襠褲。

　　此時，就需要preserveAspectRatio出馬了，此屬性也是應用在<svg>元素上，且作用的對象都是viewBox。

preserveAspectRatio="xMidYMid meet"

　　preserveAspectRatio屬性的值為空格分隔的兩個值組合而成。例如，上面的xMidYMid和meet。

　　第1個值表示，viewBox如何與SVG viewport對齊；第2個值表示，如何維持高寬比（如果有）。

　　其中，第1個值又是由兩部分組成的。前半部分表示x方向對齊，後半部分表示y方向對齊。家族成員如下：

　　x, y自由合體就可以了。

xMaxYMax  //右下

xMidYMid  //中中

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

　　下面這篇博文寫的比較清楚：https://www.w3cplus.com/html5/svg-coordinate-systems.html

理解SVG坐標系和變換：視窗,viewBox和preserveAspectRatio 著作權歸作者所有。
商業轉載請聯系作者獲得授權,非商業轉載請註明出處。
原文: https://www.w3cplus.com/html5/svg-coordinate-systems.html ? w3cplus.com 理解SVG坐標系和變換：視窗,viewBox和preserveAspectRatio 著作權歸作者所有。
商業轉載請聯系作者獲得授權,非商業轉載請註明出處。
原文: https://www.w3cplus.com/html5/svg-coordinate-systems.html ? w3cplus.com

理解SVG圖片標簽的viewport、viewBox、preserveAspectRatio縮放