SVG 直线

SVG（可缩放矢量图形）是一种用于描述二维图形的语言，它基于 XML 格式。在 SVG 中，直线是一种基本的图形元素，用于创建简单的线条。本文将详细介绍 SVG 直线的用法，包括如何创建直线、设置直线的样式和属性，以及如何在实际项目中使用直线。

1. 创建 SVG 直线

在 SVG 中，直线是通过 <line> 元素创建的。<line> 元素有四个主要的属性，用于确定直线的位置和尺寸：

• x1 和 y1：直线的起始点的 x 和 y 坐标。
• x2 和 y2：直线的结束点的 x 和 y 坐标。

以下是一个简单的例子，展示了如何创建一条从点 (10,10) 到点 (50,50) 的直线：

<svg width="100" height="100"><line x1="10" y1="10" x2="50" y2="50" stroke="black" />
</svg>

在这个例子中，stroke="black" 用于设置直线的颜色为黑色。

2. 设置直线的样式

SVG 直线支持多种样式属性，可以用来设置直线的颜色、宽度、线帽样式等。以下是一些常用的样式属性：

• stroke