SVG 线条

SVG ：绘制直线

理解 元素

SVG <line> 元素是用于绘制两点之间直线的关键元素。

一个简单的红色直线，从点 (0,0) 到 (200,200)，线宽为 2 像素，看起来会像这样：

一条从左上角开始，向右下方延伸的红色对角线。

SVG 代码示例：

<svg width="250" height="250">
  <line x1="0" y1="0" x2="200" y2="200" style="stroke:red; stroke-width:2;" />
</svg>

核心属性解释：

• x1：直线起始点的 x 坐标。
• y1：直线起始点的 y 坐标。
• x2：直线终止点的 x 坐标。
• y2：直线终止点的 y 坐标。

线条样式：

线条通常使用 CSS 属性来设置样式，可以通过 style 属性内联设置，也可以通过 CSS 样式表设置。常用属性包括：

• stroke：定义线条颜色（例如，red、#FF0000）。
• stroke-width：定义线条宽度（例如，2、5px）。
• stroke-opacity：定义线条颜色的不透明度（值从 0 到 1）。
• stroke-linecap：定义线段末端的形状（butt、round、square）。
• stroke-dasharray：创建虚线（例如，5,5 表示 5 单位的线段，5 单位的间隔）。

更多样式示例：

<svg width="300" height="100">
  <line x1="10" y1="50" x2="290" y2="50"
        style="stroke:blue; stroke-width:4; stroke-dasharray:10,5; stroke-linecap:round;" />
</svg>

实际应用：

直线广泛用于图表（例如，坐标轴、网格线）、边框、元素之间的连接线以及任何需要直线段的图形表示中。

对于更高级的线条样式和功能，可以探索 SVG 的 path 元素。你可以在 MDN Web Docs 上找到 SVG 的完整文档。