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

打印页面