SVG <line>

SVG <line> 元素用于在 SVG 图像中创建直线。

语法

<line x1="x1" y1="y1" x2="x2" y2="y2" />

属性

• x1：直线起点的 x 坐标
• y1：直线起点的 y 坐标
• x2：直线终点的 x 坐标
• y2：直线终点的 y 坐标
• stroke：直线的颜色
• stroke-width：直线的宽度

示例

<svg width="100" height="100">
  <line x1="25" y1="25" x2="75" y2="75" stroke="green" stroke-width="2" />
</svg>

效果如下：

注意事项

• SVG <line> 元素一定要在 SVG 画布内部进行绘制。
• x1、y1、x2、y2 属性必须同时出现。
• stroke-width 属性必须是正数，否则直线将不可见。