SVG 直线学习笔记

什么是SVG？

可缩放矢量图形（Scalable Vector Graphics，简称 SVG）是一种基于 XML 语言的矢量图形格式，支持交互式和动态图形。相比于位图图像，它具有更好的清晰度和无限的缩放性，而且文件体积较小，便于网络传输。

SVG中的直线

在SVG中，用<line>元素表示一条直线。它有四个属性需要指定：

• x1：起点的x坐标
• y1：起点的y坐标
• x2：终点的x坐标
• y2：终点的y坐标

例如，下面的代码创建一条从(0,0)到(100,100)的直线：

htmlCopy Code
<svg>
  <line x1="0" y1="0" x2="100" y2="100" stroke="black"/>
</svg>

其中stroke属性表示线的颜色，默认为黑色。

实例演示

下面的例子展示了如何使用SVG创建多条直线：

htmlCopy Code
<svg width="200" height="200">
  <line x1="0" y1="0" x2="100" y2="100" stroke="black"/>
  <line x1="0" y1="100" x2="100" y2="0" stroke="red" stroke-width="3"/>
  <line x1="50" y1="0" x2="50" y2="200" stroke="blue" stroke-dasharray="5 5"/>
</svg>

可以看到，三条直线分别为黑色、红色和蓝色，样式也不同。其中第二条线用stroke-width属性指定了线的粗细，第三条线用stroke-dasharray属性指定了虚线样式，其值为"5 5"表示实线长5像素，空隙长5像素。

总结

本文简要介绍了SVG中使用<line>元素创建直线的语法和属性，同时演示了多条直线的创建及样式设置。通过学习这些内容，我们可以更好地运用SVG创建出丰富多彩的矢量图形。