來源：https://segmentfault.com/a/1190000015652209
本系列文章分為三個部分:
- 第一部分是 SVG 基礎。 主要講 SVG 的一些基礎知識，包括 SVG 基本元素，畫布和視窗等。
- 第二部分是 SVG 的坐標系統。主要會講繪圖坐標系， viewBox 以及preserveAspectRatio。
- 第三部分是 如何利用 SVG 來實現動畫及交互
SVG 基本元素及屬性
渲染順序
元素的渲染順序非常重要，這決定了一個 SVG 中哪些元素可見，哪些元素不可見。SVG 元素的一個規則是“后來居上”，也就是說越后面的元素越可見。
<svg width="100" height="100" style="outline: 2px solid red;">
<rect x="0" y="0" width="50" height="50" fill="blue"/>
<rect x="0" y="0" width="50" height="50" fill="green"/>
</svg>
在同一個位置創建了 50 * 50 的兩個矩形，由於越后面的元素越可見，因此我們只能看到綠色的矩形，藍色的矩形被它遮住了。
SVG 值的單位
在 SVG 中，你可以指定值的單位，也可以不指定值的單位。如果不指定值的單位，則默認使用像素 (px) 作為單位。
<svg width="100" height="100">
<circle cx="0" cy="0" r="50%" fill="green">
</svg>
width 和 height 都沒有指定單位，那么它們的單位就是 px，相當於寬 100px 高 100px。
circle 的 r 使用百分比作為單位，因為 100px*50%=50px，則圓的半徑 r 等於 50px。
單位列表
SVG 支持的長度單位包含了常見的 CSS 單位，如下:
| 單位 | 含義 |
|---|---|
| em | 相對於父元素的字體大小 |
| px | 相對於屏幕分辨率 |
| % | 相對於父元素 |
| cm | 即厘米 |
| mm | 即毫米 |
| in | 即英寸 |
| pt | 1/72 英寸 |
| pc | 1/21 |
SVG 畫布
SVG 畫布就是用來繪制 SVG 內容的一個區域。這個畫布可以無限延伸，你可以在這個畫布的任何位置繪制你想要的內容。
SVG 視窗（viewport）
SVG 視窗和瀏覽器視窗很像。你可以通過 SVG 視窗看到畫布，但其實你只看到了畫布的一部分，超過視窗的部分會被裁切並且隱藏。就像一個網頁，它可能比瀏覽器的視窗寬，可能比瀏覽器的視窗長，但只有在視窗內的頁面是可見的。
設置視窗大小
你可以通過給 <svg> 元素設置 width 和 height 來給 SVG 視窗設置寬和高。
當然，你也可以不給視窗設置寬和高，這就會交給用戶代理程序去決定，一般默認是 300px * 150px。我們不推薦視窗使用默認的大小，最好還是根據自己的需求去定義。
<!-- 視窗大小為 200px * 200px -->
<svg width="200" height="200">
<circle cx="0" cy="0" r="100" fill="red"/>
</svg>
在 200px * 200px 的視窗內，以畫布的 0,0 點(畫布的原點和視窗的原點默認對齊)為圓心，半徑為 100 畫圓
為什么超過視窗的元素不可見
因為每個 SVG 元素都有一個默認的 overflow: hidden 樣式，所以超過視窗的內容不可見。你也可以通過設置 overflow: visible 讓超出視窗邊界的內容變得可見。
<svg width="100" height="100">
<circle cx="0" cy="0" r="50" fill="green"/>
</svg>
深入理解畫布和視窗
畫布和視窗是兩個容易混淆的概念，它們各自獨立卻又相互關聯。理解清楚它們之間的關系很有必要。
為了更好的去理解這兩個抽象概念，你可以把視窗想象成飛機上的窗戶，把畫布想象成無窮無盡的風景，只有在這個窗口內的風景才能被看到。
畫布和視窗之間的關聯
- 每創建一個
<svg>元素，就相當於創建了一個無窮大的畫布，同時創建了一個視窗。 - 畫布和視窗分別對應兩個坐標系統，一個用戶坐標系，一個視窗坐標系，這兩個坐標系統默認是對齊的。如果暫時不理解坐標系統也沒關系，請繼續往下看，我會在下一節詳細說明。