<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>
在浏览器中打开上述代码，显示效果如下 -
