SVG - 路径

<path> 元素用于绘制连接的直线。

语法声明

以下是 <path> 元素的语法声明。我们只展示了主要属性。


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

属性

名称	描述
d	路径数据，通常是一组命令，如 moveto、lineto 等。

<path> 元素用于定义任何路径。Path 元素使用由许多命令组成的 Path 数据。命令的行为类似于用铅笔轻触或指针移动以绘制路径。

命令	描述
M	从一个点移动到另一个点。
L	创建一条线。
H	创建一条水平线。
V	创建一条垂直线。
C	创建曲线。
S	创建平滑曲线。
Q	创建二次贝塞尔曲线。
T	创建平滑二次贝塞尔曲线
A	创建一个椭圆弧。
Z	关闭路径。

由于上述命令是大写的，因此这些命令表示绝对路径。如果使用小写命令，则使用 relative path。

例

testSVG.htm


<html>
	 	<title>SVG Path</title>
	 	<body>
	 	 		
	 	 	 <svg width="570" height="320">
	 	 	 	 	<g>
	 	 	 	 	 	 <text x="0" y="10" fill="black" >路径#1：无不透明性.</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 Web 浏览器中打开 textSVG.htm。您可以使用 Chrome/Firefox/Opera 直接查看 SVG 图像，无需任何插件。Internet Explorer 9 及更高版本还支持 SVG 图像渲染。

具有不透明度的路径


<html>
	 	<title>SVG Path</title>
	 	<body>
	 	 		
	 	 	 <svg width="600" height="300">	
	 	 	 	 	<g>
	 	 	 	 	 	 <text x="0" y="15" fill="black" >路径#2：不透明度 </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 Web 浏览器中打开 textSVG.htm。您可以使用 Chrome/Firefox/Opera 直接查看 SVG 图像，无需任何插件。Internet Explorer 9 及更高版本还支持 SVG 图像渲染。

打印本页