SVG LineElement.y2 属性介绍

在 SVG（Scalable Vector Graphics）中，<line> 元素用于定义一条直线。<line> 元素有四个主要属性：x1、y1、x2 和 y2，用于指定该直线的起点和终点坐标。本文将重点介绍 <line> 元素的 y2 属性。

y2 属性用于设置直线的终点纵坐标。通常情况下，y2 的值是相对于 <svg> 元素的左上角而言的。例如，如果 <svg> 元素的左上角坐标为 (0, 0)，而 y2 的值为 100，则该直线的终点纵坐标为 100。

下面是一个示例代码片段，展示如何使用 <line> 元素设置直线的起点和终点坐标以及颜色：

<svg width="200" height="200">
  <line x1="0" y1="0" x2="200" y2="200" stroke="red" />
</svg>

这段代码会在一个白色的 200x200 的 SVG 画布中绘制一条从左上角到右下角的红色直线。

除了 y2 属性外，<line> 元素还有很多其他属性，例如 x1、y1、x2、stroke 等等，这些属性可以用来控制直线的大小、颜色、粗细和位置等等。

总之，<line> 元素是 SVG 中用于绘制直线的基本元素之一，掌握好 y2 属性的使用方法可以让我们更加灵活地控制直线的终点位置。