<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<path d="M10 80 Q 95 10 180 80" fill="none" stroke="purple" stroke-width="2" />
</svg>
解释:
- <path> 元素用于创建路径。
- d 属性定义了路径的数据。在这个例子中,M 表示移动到指定坐标,Q 表示二次贝塞尔曲线,后面的坐标是曲线的控制点和终点。
- fill 属性定义了曲线的填充颜色。
- stroke 属性定义了曲线的边框颜色。
- stroke-width 属性定义了曲线的边框宽度。
在这个例子中,曲线的路径从起始点 (10, 80) 移动到控制点 (95, 10),然后到终点 (180, 80)。曲线被画成了紫色,没有填充。
你可以通过修改 d 属性的值,调整路径的形状和位置,以满足你的具体设计要求。 SVG的 <path> 元素还支持其他类型的路径命令,如直线 (L)、水平线 (H)、垂直线 (V) 等,使得你能够创建各种复杂的曲线和图形。
转载请注明出处:http://www.pingtaimeng.com/article/detail/12383/SVG