聊聊 SVG 基本形狀轉換那些事

一、前言

前段時間研究 SVG 壓縮優化，發現SVG預定義的 rect、circle、ellipse、line、polyline、polygon 六種基本形狀可通過path路徑轉換實現，這樣可以在一定程度上減少程式碼量。不僅如此，我們常用的 SVG Path 動畫(路徑動畫)，是以操作path中兩個屬性值stroke-dasharray和stroke-dashoffset來實現，基本形狀轉換為path路徑，有利於實現路徑動畫。

二、SVG基本形狀

SVG 提供了rect、circle、ellipse、line、polyline、polygon六種基本形狀用於圖形繪製，這些形狀可以直接用來繪製一些基本的形狀，如矩形、橢圓等，而複雜圖形的繪製則需要使用 path 路徑來實現。

1.rect 矩形

SVG中rect元素用於繪製矩形、圓角矩形，含有6個基本屬性用於控制矩形的形狀以及座標，具體如下：

這裡需要注意，rx 和 ry 的還有如下規則：

• rx 和 ry 都沒有設定, 則 rx = 0 ry = 0
• rx 和 ry 有一個值為0, 則相當於 rx = 0 ry = 0，圓角無效
• rx 和 ry 有一個被設定, 則全部取這個被設定的值
• rx 的最大值為 width 的一半, ry 的最大值為 height 的一半
  
  JavaScript

  rx = rx || ry || 0; ry = ry || rx || 0;   rx = rx > width / 2 ? width / 2 : rx; ry = ry > height / 2 ? height / 2 : ry;   if(0 === rx || 0 === ry){ rx = 0, ry = 0; //圓角不生效，等同於，rx，ry都為0 }

  1 2 3 4 5 6 7 8 9 10

  rx = rx || ry || 0; ry = ry || rx || 0;   rx = rx > width / 2 ? width / 2 : rx; ry = ry > height / 2 ? height / 2 : ry;   if(0 === rx || 0 === ry){ rx = 0, ry = 0; //圓角不生效，等同於，rx，ry都為0 }

2.circle 圓形

SVG中circle元素用於繪製圓形，含有3個基本屬性用於控制圓形的座標以及半徑，具體如下：

3.ellipse 橢圓

SVG中ellipse元素用於繪製橢圓，是circle元素更通用的形式，含有4個基本屬性用於控制橢圓的形狀以及座標，具體如下：

4.line 直線

Line繪製直線。它取兩個點的位置作為屬性，指定這條線的起點和終點位置。

5.polyline 折線

polyline是一組連線在一起的直線。因為它可以有很多的點，折線的的所有點位置都放在一個points屬性中：

6.polygon 多邊形

polygon和折線很像，它們都是由連線一組點集的直線構成。不同的是，polygon的路徑在最後一個點處自動回到第一個點。需要注意的是，矩形也是一種多邊形，如果需要更多靈活性的話，你也可以用多邊形建立一個矩形。

三、SVG path 路徑

SVG 的路徑<path>功能非常強大，它不僅能建立基本形狀，還能建立更多複雜的形狀。<path>路徑是由一些命令來控制的，每一個命令對應一個字母，並且區分大小寫，大寫主要表示絕對定位，小寫表示相對定位。<path> 通過屬性 d 來定義路徑， d 是一系列命令的集合，主要有以下幾個命令：

通常大部分形狀，都可以通過指令M(m)、L(l)、H(h)、V(v)、A(a)來實現，注意特別要區分大小寫，相對與絕對座標情況，轉換時推薦使用相對路徑可減少程式碼量，例如：

四、SVG 基本形狀路徑轉換原理

1.rect to path

如下圖所示，一個 rect 是由 4 個弧和 4 個線段構成；如果 rect 沒有設定 rx 和 ry 則 rect 只是由 4 個線段構成。rect 轉換為 path 只需要將 A ~ H 之間的弧和線段依次實現即可。

2.circle/ellipse to path

圓可視為是一種特殊的橢圓，即 rx 與 ry 相等的橢圓，所以可以放在一起討論。 橢圓可以看成A點到C做180度順時針畫弧、C點到A做180度順時針畫弧即可。

3.line to path

相對來說比較簡單，如下：

4.polyline/polygon to path

polyline折線、polygon多邊形的轉換為path比較類似，差別就是polygon多邊形會閉合。

五、convertpath 轉換工具

為了方便處理SVG基本元素路徑轉換，本人抽空寫了convertpath工具，具體如下：

安裝：

使用：

參考資料：

Basic Shapes – SVG 1.1 (Second Edition)
基本形狀 – SVG | MDN
SVG (一) 圖形, 路徑, 變換總結; 以及橢圓弧線, 貝塞爾曲線的詳細解釋
路徑 – SVG | MDN
XMLDOM