SVG (一) 圖形, 路徑, 變換總結; 以及橢圓弧線, 貝塞爾曲線的詳細解釋

原文發表自個人博客

近期工做中要處理不少 SVG 圖片, 因此從零開始學習了 SVG 的相關內容.
我看的是這本書 SVG Essentials, 2nd Edition,以及它的中譯版 SVG精髓（第2版）.
這本書深刻淺出, 例子不少, 很是不錯. 由於 svg 涉及到不少關於顏色的內容, 因此仍是建議你們看電子版.

工做中的任務是實現一個相框功能, 當中涉及到了諸如 use, image, clip-path 的內容, 學習了一段時間後總算解決了, 因此但願記錄一下學習內容和解決方案.
內容比較多, 因此準備開一個系列, 這是 SVG 系列的第一篇, 基礎知識總結. 後續將會有更多關於 SVG 的內容. 敬請期待!

SVG basics

Shape Reference Summary

形狀	描述
<line x1="start-x" y1="start-y" x2="end-x" y2="end-y"/>	直線: 起點(start-x, start-y) 終點(end-x, end-y);
<rect x="left-x" y="top-y" width="width" height="height" />	矩形: 左上角(left-x, top-y), 寬高 width, height
<circle cx="center-x" cy="center-y" r="radius"/>	圓: 圓心(center-x, center-y) 半徑 r
<ellipse cx="center-x" cy="center-y" rx="x-radius" ry="y-radius"/>	橢圓: 圓心(center-x, center-y) xy軸半徑 rx, ry
<polygon points="points-list"/>	多邊形: 由一系列座標組成, points-list: x1 y1 x2 y2 x3 y3 ....
<polyline points="points-list"/>	折線: 由一系列座標組成, points-list: x1 y1 x2 y2 x3 y3 ....

Path Reference Summary

本質上, 上述基本形狀都是路徑(path)的簡寫. 簡寫可使得 svg 文檔更具備可讀性. 可是當碰到複雜路徑時, 就須要 path 來描述. 如下總結中, 凡是出現大寫字母表示後續座標爲絕對座標, 凡是小寫字母都表明相對於上一個座標的相對位移. Z 同 z 無差異. 由於表示閉合, 其後不用跟座標

command	描述
M(m) x y	移動到(x, y) (小寫表示相對於上個座標的位移, 下同)
L(l) x y	畫一條直線到(x, y)
H(h) x	水平畫一條直線到 x
V(v) y	豎直畫一條直線到 y
A(a) rx ry x-axis-rotation large-arc sweep x y	畫一段到(x,y)的橢圓弧. 橢圓弧的 x, y 軸半徑分別爲 rx,ry. 橢圓相對於 x 軸旋轉 x-axis-rotation 度. large-arc=0代表弧線小於180讀, large-arc=1表示弧線大於180度. sweep=0代表弧線逆時針旋轉, sweep=1代表弧線順時間旋轉. 具體解釋看如何繪製橢圓弧
Q(q) cx cy x y	從當前點畫一條到(x, y)的二次貝塞爾曲線, 曲線的控制點爲(cx, cy). 關於二次貝塞爾曲線請看[二次貝塞爾曲線詳解](#articleHeader6
T(t) x y	此命令只能跟在一個 Q 命令使用, 假設 Q 命令生成曲線 s, T 命令的做用是從 s 的終點再畫一條到(x y)的二次貝塞爾曲線, 曲線的控制點爲 s 控制點關於 s 終點的對稱點. T 命令生成的曲線會很是平滑
C(c) cx1 cy1 cx2 cy2 x y	從當前點畫一條到(x, y)的三次貝塞爾曲線, 曲線的開始控制點和終點控制點爲別爲 (cx1, cy1), (cx2, cy2). 關於三次貝塞爾曲線請看三次貝塞爾曲線詳解
S(s) cx2 cy2 x y	此命令只能跟在 C 命令後使用, 假設 C 命令生成曲線 s, S 命令的做用是再畫一條到 (x, y)的三次貝塞爾曲線, 曲線的終點控制點是 (cx2, cy2), 曲線的開始控制點是 s 的終點控制點關於 s 終點的對稱點.

Transformation Reference Summary

transform	描述
translate(x, y)	平移: 將用戶座標系統的座標原點移動到(x, y)
scale(xFactor, yFactor)	縮放: 將用戶座標系統的xy軸單位長度分別乘(xFactor, yFactor)倍
scale(factor)	縮放: 同 scale(factor, factor)
rotate(angle, centerX, centerY)	旋轉: 將用戶座標系統以(centerX, centerY)爲旋轉中心順時針旋轉 angle 度
rotate(angle)	旋轉: 同 rotate(angle, 0, 0)
skewX(angle)	傾斜: 根據 angle 傾斜全部 x 軸座標, 視覺上會看到 y 軸傾斜...
skewY(angle)	傾斜: 根據 angle 傾斜全部 y 軸座標, 視覺上會看到 x 軸傾斜...
matrix(a b c d e f)	矩陣變換: 將座標系統進行矩陣變換, 詳細內容請參考後續文章

Details

Ellipse

一種直觀的表示橢圓弧線的方式是, 根據橢圓中心 (x, y), x 軸半徑 rx, y 軸半徑 ry, 開始角度 startAngle, 結束角度 endAngle.
可是爲何 SVG 會採用 A(a) rx ry x-axis-rotation large-arc sweep x y 這樣的形式呢,
主要是由於在 SVG 中, 弧線並非孤立的存在, 他要成爲總體的一部分. 因此 SVG 採用了起始點這樣的方式.
那麼其餘的 x-axis-rotation, large-arc, sweep 又是什麼意思呢? 咱們如今來看下面這張圖.

當肯定了兩個點已經橢圓的 rx, ry 後並不能惟一肯定一條橢圓弧, 實際上根據是不是大圓, 路徑是不是逆時針能夠產生四條 (b, c, d, e)
其中, large-arc-flag=0 表示小圓, sweep-flag=0 表示逆時針.

那麼 x-axis-rotation 又是什麼意思呢? b, c, d, e 產生的前提是 橢圓的 x 軸與用戶座標系的 x 軸是平行的.
f 圖表示橢圓 x 軸相對於用戶座標系的 x 軸旋轉30度所產生的橢圓弧. 灰色的部分表示原來產生的橢圓弧.

Quadratic Bezier

關於貝塞爾曲線的數學含義請看Bézier curve
這裏直觀的講一下

以上曲線的路徑表示是: <path d="M200,300 Q400,50 600,300 T1000,300"/>
咱們能夠看出:
A 是起點, B 是終點, C 就是控制點.
找出 AC 的重點 D, BC 的重點 E, 鏈接 DE, 找出其中點 F, F 即這條曲線前半段的一個切點.

這裏不談數學含義, 這樣的幾何意義更加直觀.

再來看 T 命令, 其實 T 命令是 Q 的一個簡寫.
其控制點 H 就是上個 Q 命令的控制點 C 關於終點 B 的對稱點.
使用 T 命令產生的曲線每每比較順滑 :)

Cubic Bezier

再來看一下三次貝塞爾曲線

<path d="M100,200 C100,100 250,100 250,200 S400,300 400,200"/>

前半段曲線(C 命令) s1:
起點 A, 終點 B, 起點控制點 C, 終點控制點 D, 鏈接 AC, BD, CD;
找到 CD 中點 F, 鏈接 AC 中點 E 與 F, 鏈接 BD 中點 G 與 F;
鏈接 EF, FG, 鏈接 EF 中點 H 與 FG 中點 I;
I 即爲前半段曲線的切點;

後半段曲線(S 命令) s2:
S 只能跟在 C 命令後使用;
s2 的起點 B, 終點 L, 終點控制點 K;
s2 的起點控制點是 s1 的終點控制點 D 關於 s1終點 B 的對稱點

下圖是更多關於三次貝塞爾曲線的例子:

Reference

• SVG Essentials, 2nd Edition

• SVG精髓（第2版）

• 以上圖片均改編自W3C SVG規範

• MDN SVG Tutorial - Path

• segmentFault 竟然不能傳 svg.... 使用 svg2png 轉換