编辑这个页面须要登录或更高权限！

SVG <line> 画直线

SVG <line>元素是一个SVG基本形状，用来创建一条连接两个点的线。 <line>元素用于在SVG图像内部绘制线条。可以绘制水平直线，垂直竖线直线、斜角直线等

SVG line 在线示例

以下是一些简单的常用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属性设置笔划（线条）的颜色和粗细。

SVG <polyline> 画曲折线SVG <ellipse> 画椭圆