SVG 直线 <line>
SVG 中的 <line>
元素用于绘制直线,它是 SVG 中常用的基本形状之一。
使用 <line>
元素可以创建两个点之间的直线,并可以通过设置属性来控制直线的位置、长度和样式。
基本语法
<line x1="x1-coordinate" <!-- 起点的 x 坐标 --> y1="y1-coordinate" <!-- 起点的 y 坐标 --> x2="x2-coordinate" <!-- 终点的 x 坐标 --> y2="y2-coordinate" <!-- 终点的 y 坐标 --> stroke="stroke-color" <!-- 直线的颜色 --> stroke-width="width" <!-- 直线的宽度 --> />
属性解析:
x1
和y1
属性定义了直线的起点坐标。x2
和y2
属性定义了直线的终点坐标。stroke
属性定义了直线的颜色。stroke-width
属性定义了直线的宽度。
以下代码绘制了一个黑色描边、宽度为 2 像素的直线,起点坐标为 (50, 50),终点坐标为 (150, 150)。
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <line x1="50" y1="50" x2="150" y2="150" stroke="black" stroke-width="2" /> </svg>
实例
下面是SVG代码:
实例
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<line x1="0" y1="0" x2="200" y2="200"
style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>
<line x1="0" y1="0" x2="200" y2="200"
style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>
尝试一下 »
点击查看:查看 SVG 文件。
- x1 属性在 x 轴定义线条的开始
- y1 属性在 y 轴定义线条的开始
- x2 属性在 x 轴定义线条的结束
- y2 属性在 y 轴定义线条的结束
点我分享笔记