<path>元素用於繪製連接的直線。
聲明
以下是<path>元素的語法聲明。這裏只顯示了一些主要屬性。
<path
d="data" >
</path>
屬性
| 編號 | 屬性 | 描述 |
|---|---|---|
| 1 | d |
路徑數據，通常是一組命令，如moveto，lineto等。 |
<path>元素用於定義任何路徑。 路徑元素使用包含多個命令的路徑數據。 命令的行為就像一個鉛筆咬合或指針正在移動繪製一條路徑。
| 編號 | 命令 | 描述 |
|---|---|---|
| 1 | M |
從一個點移動到另一個點。 |
| 2 | L |
創建一條線。 |
| 3 | H |
創建一條水平線。 |
| 4 | V |
創建一條垂直線。 |
| 5 | C |
創建一條曲線。 |
| 6 | S |
創建一條平滑的曲線。 |
| 7 | Q |
創建二次貝塞爾曲線。 |
| 8 | T |
創建一個平滑的二次貝塞爾曲線 |
| 9 | A |
創建一個橢圓弧。 |
| 10 | Z |
關閉路徑。 |
如上面的命令是大寫的，這些代表絕對路徑。 如果使用小寫命令，則使用相對路徑。
示例
檔:testSVG.html -
<html>
<title>SVG路徑</title>
<body>
<h1>簡單SVG路徑圖片</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網路流覽器中打開testSVG.html。 您可以使用Chrome/Firefox/Opera直接查看SVG圖像，無需任何插件。 Internet Explorer 9及更高版本還支持SVG圖像呈現。
使用opacity示例
<html>
<title>SVG路徑</title>
<body>
<h1>簡單SVG路徑圖片</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;opacity:0.5;"> </path>
</g>
</svg>
</body>
</html>
在流覽器中打開上述代碼，顯示效果如下 -
