<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" fill="none" stroke="black" stroke-width="2" />
</svg>
在这个例子中,路径数据是 "M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"。解释如下:
- M 表示移动到指定坐标,后面的两个数字是起始点的 x 和 y 坐标。
- C 表示三次贝塞尔曲线,后面的六个数字依次是两个控制点和终点的坐标。
- S 表示光滑曲线,后面的四个数字依次是一个控制点和终点的坐标。
其他常见的路径命令还包括直线 (L)、水平线 (H)、垂直线 (V) 等。
在上述例子中,路径被用于创建一条弯曲的曲线,并用黑色边框进行描边。这个曲线起始于 (10, 80),经过两个控制点,终止于 (180, 80)。路径的填充颜色设置为 none,表示不填充。
你可以根据需要调整路径数据以及添加其他属性,以满足你的具体设计要求。 SVG 的路径元素允许你创建各种各样的复杂图形。
转载请注明出处:http://www.pingtaimeng.com/article/detail/12384/SVG