SVG <line>元素是一个SVG基本形状,用来创建一条连接两个点的线。 <line>元素用于在SVG图像内部绘制线条。可以绘制水平直线,垂直竖线直线、斜角直线等
以下是一些简单的常用SVG <line>画直线的示例:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <line x1="0" y1="10" x2="0" y2="100" style="stroke:#006600;"></line> <line x1="10" y1="10" x2="100" y2="100" style="stroke:#006600;"></line> <line x1="20" y1="10" x2="100" y2="50" style="stroke:#006600;"></line> <line x1="30" y1="10" x2="110" y2="10" style="stroke:#006600;"></line> </svg>测试看看 ‹/›
以上代码运行后直线效果如下:
直线起始点由x1和y1属性设置的点处。
直线终点由x2和y2属性设置的点处。
该style属性设置笔划(线条)的颜色和粗细。