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元素可以使用兩種方法：

1. setAttribute(x,val) / getAttribute(x)
2. obj.x

SVG操作方法只有一種

1. 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 動畫 ！