HTML5 中的可缩放矢量图形（SVG）-创建基本形状持续更新

look_w

path 元素使用 path 元素（所有绘图元素中最复杂的），可以使用一组专门的命令创建任意图形。path 元素支持表 2 中的命令。            
表 2. path 元素支持的命令命令描述M移动到L连线到H水平连线到V垂直连线到C使用曲线连接到S使用平滑曲线连接到Q使用二次贝塞尔曲线连接到T使用平滑的二次贝塞尔曲线连接到A使用椭圆曲线连接到Z将路径封闭到
能以大写或小写形式使用这些命令。当命令为大写时，应用绝对位置。当它为小写时，应用相对位置。提供所有命令示例已超出了本文的范围。但是，以下示例会演示它们的基本使用。            
可以使用 path 元素从本文前面的示例创建任何简单的形状。清单 12 使用 path 元素创建了一个基本的三角形。            
清单 12. 使用 path 元素创建一个三角形

1 2 3

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">     <path d="M150 0 L75 200 L225 200 Z" style="fill:red"/> </svg>

清单 12 中的代码会生成图 12 中的图形。
图 12. 使用 path 元素的三角形这组命令使用 d 属性定义。在本例中，从 x 坐标 150 和 y 坐标 0 处开始绘制，这在移动到命令 (M150 0) 中定义。然后再使用 “连线到” 命令绘制一条直线连接到 x 坐标 75 和 y 坐标 200 的位置 (L75 200)。接下来，使用另一个 “连线到” 命令绘制另一条线 (L225 200)。最后，使用 “封闭到” 命令封闭图形 (Z)。Z 命令没有提供任何坐标，因为要关闭您所在的路径，根据定义，要绘制一条从当前位置到图形起点（在本例中为 x = 150 y =0）的线。            
这里的意图是展示一个基本示例；如果您想要的只是一个简单的三角形，最好使用 polygon 标记。            
path 元素的真正强大之处是创建自定义形状的能力，如清单 13 所示。该示例来自万维网联盟 (W3C) 文档可缩放矢量图形 (SVG) 1.1（第二版）（参见 参考资料）。            
清单 13. 使用 path 元素创建一个自定义形状

1 2 3 4 5 6 7 8 9 10 11 12

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">        <path d="M300,200 h-150 a150,150 0 1,0 150,-150 z"                 fill="red" stroke="blue" stroke-width="5"/>        <path d="M275,175 v-150 a150,150 0 0,0 -150,150 z"                  fill="yellow" stroke="blue" stroke-width="5"/>        <path d="M600,350 l 50,-25                  a25,25 -30 0,1 50,-25 l 50,-25                  a25,50 -30 0,1 50,-25 l 50,-25                  a25,75 -30 0,1 50,-25 l 50,-25                  a25,100 -30 0,1 50,-25 l 50,-25"                  fill="none" stroke="red" stroke-width="5"/> </svg>

清单 13 中的代码会生成图 13 中的图形。
图 13. 使用 path 元素的自定义形状使用 path 元素，可以创建复杂的图形，比如图表和波浪线。请注意，这个示例使用了多个 path 元素。当创建图形时，根 SVG 标记中可以包含多个绘图元素。