ath 是 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 動畫 ！

<div class="button"> 
 <svg 
 viewBox="0 0 320 60" 
 version="1.1" 
 xmlns="http://www.w3.org/2000/svg" 
 > 
 <rect class="shape" height="60" width="320"></rect> 
 </svg> 
 <div class="hover-text">Web 秀</div> 
</div>

.button { 
 position: absolute; 
 width: 320px; 
 height: 60px; 
 top: 50%; 
 left: 50%; 
 transform: translate(-50%, -50%); 
} 
.hover-text { 
 position: absolute; 
 line-height: 60px; 
 width: 320px; 
 top: 0; 
 color: #1199ff; 
 font-size: 28px; 
 text-align: center; 
 cursor: pointer; 
} 
.shape { 
 fill: transparent; 
 stroke-width: 4px; 
 stroke: #1199ff; 
}

.shape { 
 ... 
 stroke-dasharray: 160 520; 
 stroke-dashoffset: -460; 
}

.button:hover .hover-text { 
 transition: 0.5s; 
 color: pink; 
} 
 
.button:hover .shape { 
 -webkit-animation: draw 0.5s linear forwards; 
 animation: draw 0.5s linear forwards; 
} 
 
@keyframes draw { 
 0% { 
 stroke-dasharray: 160 520; 
 stroke-dashoffset: -460; 
 stroke-width: 4px; 
 } 
 100% { 
 stroke-dasharray: 760; 
 stroke-dashoffset: 0; 
 stroke-width: 2px; 
 stroke: pink; 
 } 
}

<div class="button"> 
 <svg 
 viewBox="0 0 320 60" 
 version="1.1" 
 xmlns="http://www.w3.org/2000/svg" 
 > 
 <rect class="shape" height="60" width="320"></rect> 
 </svg> 
 <div class="hover-text">Web 秀</div> 
</div>

.button { 
 position: absolute; 
 width: 320px; 
 height: 60px; 
 top: 50%; 
 left: 50%; 
 transform: translate(-50%, -50%); 
} 
.hover-text { 
 position: absolute; 
 line-height: 60px; 
 width: 320px; 
 top: 0; 
 color: #1199ff; 
 font-size: 28px; 
 text-align: center; 
 cursor: pointer; 
} 
.shape { 
 fill: transparent; 
 stroke-width: 4px; 
 stroke: #1199ff; 
}

.shape { 
 ... 
 stroke-dasharray: 160 520; 
 stroke-dashoffset: -460; 
}

.button:hover .hover-text { 
 transition: 0.5s; 
 color: pink; 
} 
 
.button:hover .shape { 
 -webkit-animation: draw 0.5s linear forwards; 
 animation: draw 0.5s linear forwards; 
} 
 
@keyframes draw { 
 0% { 
 stroke-dasharray: 160 520; 
 stroke-dashoffset: -460; 
 stroke-width: 4px; 
 } 
 100% { 
 stroke-dasharray: 760; 
 stroke-dashoffset: 0; 
 stroke-width: 2px; 
 stroke: pink; 
 } 
}