在SVG中创建曲线使用 <path> 元素,并通过 d 属性来定义路径数据。以下是一个简单的SVG曲线的例子:
<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