<line>

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

<line> SVG 元素是一个 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；可动画：是
路径长度: 定义用户单位的总路径长度。值类型：<number>；默认值：无；可动画：是

DOM 接口

此元素实现了 SVGLineElement 接口。

示例

html,
body,
svg {
  height: 100%;
}

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>

规范

规范
Scalable Vector Graphics (SVG) 2 # LineElement

浏览器兼容性

另见

其他 SVG 基本形状：<circle>、<ellipse>、<polygon>、<polyline>、<rect>

帮助改进 MDN

了解如何贡献

此页面最后修改于 ⁨2025年6月6日⁩，由 MDN 贡献者编辑。

在 GitHub 上查看此页面 • 报告此内容的某个问题