path 是 SVG 基本形狀中最強大的一個，不僅可以實現我們上一篇《HTML5(七)——SVG基礎入門》中，介紹的 SVG 預定義的 line、rect、circle、ellipse、line、polyline、polygon 六種基本形狀。還可以實現更復雜的效果，我們就開始學習 path 如何應用。
一、path 路徑詳解
1.1、path 命令
path 用於定義一個路徑，其中命令就是控制這條路徑的，以下命令就是可用於路徑數據：
注：以上所有命令大小寫都可以，區別是大寫命令表示絕對定位，小寫表示相對定位。
1.2、path 使用
使用語法：<path d=" M x1 y1 L x2 y2 H x3.... " stroke="red"></path>
d：引出路徑，d 中的值由多條命令組合而成。
圓弧在實際場景中應用非常廣泛，A 命令中參數較多，large-arc 和 sweep 較難理解，詳細介紹下。
使用語法：<path d="M x y A rx ry x-axis-rotation large-arc sweep x y"></path>
如上圖所示，A 到 B 兩個點再加半徑，可以繪制出 4 條弧線，具體選哪一條呢？就是由 large-arc (是否是大弧)和 sweep(是否逆時針旋轉) 兩個參數決定。
large-arc = 1 表示弧度大於等於180，反之就是小於180。
sweep = 0 表示逆時針旋轉，反正順時針旋轉。
所以上述 4 條弧線分別對應的兩個參數為：
- 1：(0 0)
- 2：(0,1)
- 3：(1,1)
- 4：(1,0)
eg：使用 path 繪制一條直線、半圓、直線，連接起來形成一個拱橋，代碼如下：
<svg version="1.1" height="400" width="550"> <path d=" M 0 100 //（0，100）是起點 L 100 100 // 畫一條直接到 (100,100) A 100 100 0 1 1 300 100 // 畫一段圓弧 L 400 100 //畫一條直線到 (400,100) " stroke="black" stroke-width="1" fill="none"></path> </svg>運行結果如下：
可以自己修改上述 A 中 參數觀察半圓的變化。
1.3、js 操作path
我們經常使用js動態添加、移除元素等，可以實現更炫酷的特效，那js能動態操作path嗎？如何操作呢？
我們使用js動態繪制一個與上邊案例eg1一樣的path。
<svg version="1.1" height="400" width="550" id="svg"></svg> <script > window.onload = function(){ let svg = document.getElementById("svg") let path = document.createElement("path") path.setAttribute('d',"M 0 100 L 100 100 A 100 100 0 1 1 300 100 L 400 100") svg.appendChild(path) } </script>
運行代碼，我們發現沒有報錯，也沒有顯示任何結果。
添加：alert(path)，打印出 [object HTMLUnknownElement]。
說明 html 把 path 當作普通的 html 標簽解析了，發現並不認識該標簽，所以頁面沒有任何效果，此時我們需要介紹一個新的創建元素方法。
createElementNS介紹
createElementNS 是創建一個具有指定的命名空間URI和限定名稱的元素。
使用語法：document.createElementNS(namespaceURI, qualifiedName[, options]);
- namespaceURI 指定與元素相關聯的命名空間URI的字符串。創建的元素的namespaceURI (en-US)屬性使用namespaceURI的值進行初始化。
- qualifiedName指定要創建的元素的類型的字符串。 創建的元素的nodeName (en-US)屬性使用qualifiedName的值進行初始化。
- options可選的一個可選的包含單個屬性的ElementCreationOptions對象，其值是預先使用customElements.define()定義的自定義元素的標簽名稱。為了向后兼容自定義元素規范的早期版本，一些瀏覽器允許您在此使用字符串替代對象，其中字符串的值是自定義元素的標簽名稱。
生成path元素代碼：
let path = document.createElementNS( "http://www.w3.org/2000/svg", "path" )
js操作屬性時，html元素與SVG元素區別：
普通html元素可以使用兩種方法：
- setAttribute(x,val) / getAttribute(x)
- obj.x
SVG操作方法只有一種
- setAttribute(x,val) / getAttribute(x)
eg3：圖表中餅圖是特別常見的，我們就先使用 js 動態地繪制一個扇形圓弧。
<svg version="1.1" height="400" width="550" id="svg"></svg> <script > function d2a(n){ return Math.PI*n/180 } function pie(ang1,ang2,r,cx,cy){ let svg = document.getElementById("svg") let path = document.createElementNS("http://www.w3.org/2000/svg","path") let arr = [] let x1 = cx + Math.sin(d2a(ang1))*r let y1 = cy - Math.cos(d2a(ang1))*r let x2 = cx + Math.sin(d2a(ang2))*r let y2 = cy - Math.cos(d2a(ang2))*r arr.push(`M ${cx} ${cy} L ${x1} ${y1} A ${r} ${r} 0 0 1 ${x2} ${y2} `) arr.push("Z") path.setAttribute('d',arr.join(' ')) svg.appendChild(path) } window.onload = function(){ pie(20,180,200,200,200) } </script>
運行結果如圖所示：
如果有興趣，可以自己修改開始角度和結束角度，可以繪制出很多種不同效果的圓弧。
二、樣式以及優先級
上述代碼
<path d="
M 0 100 //（0，100）是起點
L 100 100 // 畫一條直接到 (100,100)
" stroke="black" stroke-width="1" fill="none"></path>
上述屬性可以分為兩類：
- 只能為屬性 - 決定圖形或路徑形狀的
- 可以放樣式 - 視覺上的效果
如 troke、fill等是控制視覺上的效果，這樣的屬性可以放入 style 樣式中。所以上述代碼可以改寫為：
<path d="
M 0 100 //（0，100）是起點
L 100 100 // 畫一條直接到 (100,100)
" style="stroke:black;stroke-width:1;fill:none"></path>
該樣式可以放到 head 的 style 中，代碼為：
path{ fill:none; stroke:black; stroke-width:1 }
還可以通過 class、id、標簽等添加樣式，他們的優先級分別為：
屬性< * < 標簽 < class < id < 行間
path 的樣式控制同樣適用於 SVG 預定義的 rect、circle、ellipse 等元素。
如果覺得還不錯！
點個關注，下篇解密 SVG 動畫 ！