在 SVG 中,直线是一种基本的图形元素,用于连接两个点并创建直线段。在 HTML 中,我们可以使用 <line>
元素来绘制直线。
创建直线
要创建一个直线,我们需要指定起点和终点的坐标。下面是一个简单的示例代码,用于绘制一条从 (100, 100) 到 (200, 200) 的直线:
<svg width="300" height="300"> <line x1="100" y1="100" x2="200" y2="200" stroke="black" /> </svg>
在上面的代码中,x1
和 y1
分别代表直线的起点坐标,x2
和 y2
分别代表直线的终点坐标。stroke
属性用于指定直线的颜色。
直线属性
除了起点和终点的坐标外,我们还可以设置直线的其他属性,比如线宽、线样式等。下面是一个包含更多属性的示例代码:
<svg width="300" height="300"> <line x1="50" y1="50" x2="250" y2="50" stroke="black" stroke-width="2" stroke-dasharray="5,5" /> </svg>
在上面的代码中,stroke-width
属性用于设置直线的宽度,stroke-dasharray
属性用于设置虚线样式。
其他直线样式
除了使用 <line>
元素绘制直线外,我们还可以使用 <polyline>
或 <path>
元素来创建复杂的直线路径。下面是一个使用 <polyline>
元素创建直线路径的示例代码:
<svg width="300" height="300"> <polyline points="50,50 100,100 150,50 200,100 250,50" stroke="black" fill="none" /> </svg>
在上面的代码中,points
属性用于指定直线路径的多个点坐标,通过空格分隔。
以上就是关于 SVG 直线的介绍,希望能帮助你更好地理解和应用 SVG 技术。