SVG - 路徑

<path> 元素用於繪製連線的直線。

宣告

以下是<path>元素的語法宣告。我們只顯示了主要屬性。

<path
   d="data" >  
</path>

屬性

序號	名稱&描述
1	d − 路徑資料，通常是一組命令，例如 moveto、lineto 等。

<path> 元素用於定義任何路徑。路徑元素使用路徑資料，路徑資料包含多個命令。命令就像一支鉛筆或指標移動以繪製路徑。

序號	命令 & 描述
1	M − moveto − 從一個點移動到另一個點。
2	L − lineto − 建立一條線。
3	H − horizontal lineto − 建立一條水平線。
4	V − vertical lineto − 建立一條垂直線。
5	C − curveto − 建立一條曲線。
6	S − smooth curveto − 建立一條平滑曲線。
7	Q − 二次貝塞爾曲線 − 建立一條二次貝塞爾曲線。
8	T − smooth quadratic Bezier curveto − 建立一條平滑的二次貝塞爾曲線
9	A − 橢圓弧 − 建立一個橢圓弧。
10	Z − closepath − 關閉路徑。

如上所述，命令是大寫，表示絕對路徑。如果使用小寫命令，則使用相對路徑。

示例

testSVG.htm

<html>
   <title>SVG Path</title>
   <body>
   
      <h1>Sample SVG Path Image</h1>
      
      <svg width="570" height="320">
         <g>
            <text x="0" y="10" fill="black" >Path #1: Without opacity.</text>
            
            <path d="M 100 100 L 300 100 L 200 300 z" 
            stroke="black" stroke-width="3" fill="rgb(121,0,121)"> </path>
         </g> 
      </svg>
   
   </body>
</html>

在上面的例子中，在第一個形狀中，M 100 100 將繪圖指標移動到 (100,100)，L 300 100 從 (100,100) 繪製一條線到 (300,100)，L 200 300 從 (300,100) 繪製一條線到 (200,300) 並且 z 關閉路徑。

輸出

在 Chrome 瀏覽器中開啟 textSVG.htm。您可以使用 Chrome/Firefox/Opera 直接檢視 SVG 影像，無需任何外掛。Internet Explorer 9 及更高版本也支援 SVG 影像渲染。

具有不透明度的路徑

<html>
   <title>SVG Path</title>
   <body>
      
      <h1>Sample SVG Path Image</h1>
      
      <svg width="800" height="800"> 
         <g>
            <text x="0" y="15" fill="black" >Path #2: With opacity </text>
            
            <path d="M 100 100 L 300 100 L 200 300 z"
            style="fill:rgb(121,0,121);stroke-width:3;
            stroke:rgb(0,0,0);stroke-opacity:0.5;"> </path>
         </g>
      </svg>
   
   </body>
</html>

輸出

在 Chrome 瀏覽器中開啟 textSVG.htm。您可以使用 Chrome/Firefox/Opera 直接檢視 SVG 影像，無需任何外掛。Internet Explorer 9 及更高版本也支援 SVG 影像渲染。

svg_shapes.htm

列印頁面