SVG 折线元素

SVG（Scalable Vector Graphics）是一种基于 XML 语言的标准，可以被用来描述二维矢量图形。

SVG 折线元素用于绘制一条直线连接两个或多个点。本文将介绍 SVG 折线元素的用法和相关属性。

语法

SVG 折线元素的语法如下：

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

其中，x1、y1 是第一个点的坐标，x2、y2 是第二个点的坐标。可以在此基础上添加更多的点。

属性

SVG 折线元素有以下常用属性：

• x1：第一个点的横坐标。
• y1：第一个点的纵坐标。
• x2：第二个点的横坐标。
• y2：第二个点的纵坐标。
• stroke：线条颜色，默认 black。
• stroke-width：线条宽度，默认 1。
• stroke-dasharray：线条样式，可设置成 “5,5” 表示虚线。

示例

以下是一个简单的 SVG 折线元素示例：

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

效果如下所示：

以下是多点的 SVG 折线元素示例：

<svg width="200" height="200">
  <line x1="0" y1="0" x2="100" y2="100" stroke="blue" stroke-width="2" />
  <line x1="100" y1="100" x2="200" y2="0" stroke="red" stroke-width="2" stroke-dasharray="5,5" />
</svg>

效果如下所示：

总结

本文介绍了 SVG 折线元素的用法和常用属性，希望本文对你了解 SVG 折线元素有所帮助。