SVG 可以使用 <line>
标签用来画出一条直线段。使用时只需要指定线段起止点的 x 和 y 坐标即可。指定坐标时可以不带单位,此时会使用用户坐标,也可以带上单位,如 em,in 等。
示例
SVG 中画了好几条直线,如下:
<svg width="300px" height="300px" viewBox="0 0 100 100">
<!-- 水平线段 -->
<line x1="40" y1="20" x2="80" y2="20" style="stroke: black;"/>
<!-- 垂直线段 -->
<line x1="0.7cm" y1="1cm" x2="0.7cm" y2="2.0cm" style="stroke: black;"/>
<!-- 对角线段 -->
<line x1="30" y1="30" x2="85" y2="85" style="stroke: black;"/>
</svg>
代码解释:
- x1 属性在 x 轴定义线条的开始
- y1 属性在 y 轴定义线条的开始
- x2 属性在 x 轴定义线条的结束
- y2 属性在 y 轴定义线条的结束
上面示例的几条直线如下: