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

SVG 全稱 Scalable Vector Graphics (可縮放矢量圖形)。它是一種用來描述二維矢量圖形的 XML 標記語言。

本系列文章分爲三個部分:

• 第一部分是 SVG 基礎。 主要講 SVG 的一些基礎知識，包括 SVG 基本元素，畫布和視窗等。
• 第二部分是 SVG 的座標系統。主要會講繪圖座標系， viewBox 以及preserveAspectRatio。
• 第三部分是 如何利用 SVG 來實現動畫及交互。

最近寫了一個 Sketch 插件，能夠將 Sketch 圖層壓縮並轉化爲 React/React Native Component。歡迎到 GitHub 來 Star: https://github.com/reeli/sket...

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>

深刻理解畫布和視窗

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

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

畫布和視窗之間的關聯

1. 每建立一個 <svg> 元素，就至關於建立了一個無窮大的畫布，同時建立了一個視窗。
2. 畫布和視窗分別對應兩個座標系統，一個用戶座標系，一個視窗座標系，這兩個座標系統默認是對齊的。若是暫時不理解座標系統也不要緊，請繼續往下看，我會在下一節詳細說明。

點這裏進入下一章 SVG 的座標系統