<line>

<line> 元素是 SVG 基本形状，用于创建连接两点的直线。

示例

html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="80" x2="100" y2="20" stroke="black" />

  <!-- If you do not specify the stroke
       color the line will not be visible -->
</svg>

属性

x1

定义直线起点的 x 轴坐标。值类型：<length>|<percentage>|<number>；默认值：0；可动画：是

x2

定义直线终点的 x 轴坐标。值类型：<length>|<percentage>|<number>；默认值：0；可动画：是

y1

定义直线起点的 y 轴坐标。值类型：<length>|<percentage>|<number>；默认值：0；可动画：是

y2

定义直线终点的 y 轴坐标。值类型：<length>|<percentage>|<number>；默认值：0；可动画：是

pathLength

以用户单位定义总路径长度。值类型：<number>；默认值：无；可动画：是

使用上下文

类别基本形状元素、图形元素、形状元素
允许内容任意数量的以下元素，按任意顺序
动画元素
描述性元素

规范

规范
可缩放矢量图形 (SVG) 2
# LineElement

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅