深入理解 SVG 系列（一） —— SVG 基礎

來源：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 單位，如下:

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>

深入理解畫布和視窗

畫布和視窗是兩個容易混淆的概念，它們各自獨立卻又相互關聯。理解清楚它們之間的關係很有必要。

為了更好的去理解這兩個抽象概念，你可以把視窗想象成飛機上的窗戶，把畫布想象成無窮無盡的風景，只有在這個視窗內的風景才能被看到。

畫布和視窗之間的關聯

1. 每創建一個 <svg> 元素，就相當於創建了一個無窮大的畫布，同時創建了一個視窗。
2. 畫布和視窗分別對應兩個坐標系統，一個用戶坐標系，一個視窗坐標系，這兩個坐標系統預設是對齊的。如果暫時不理解坐標系統也沒關係，請繼續往下看，我會在下一節詳細說明。