Front End

Appearance

SVG line元素 ​

SVG<line>元素可以用来在SVG图片中绘制直线。

视频版教程 ​

如果你喜欢看视频版教程，可以直接看下面的视频：

SVG line示例 ​

下面给出了一些简单的SVG直线示例：

xml
<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 x1="10" y1="10" x2="100" y2="100" style="stroke:#006600;"/>
        <line x1="20" y1="10" x2="100" y2="50"  style="stroke:#006600;"/>
        <line x1="30" y1="10" x2="110" y2="10"  style="stroke:#006600;"/>
</svg>
<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 x1="10" y1="10" x2="100" y2="100" style="stroke:#006600;"/>
        <line x1="20" y1="10" x2="100" y2="50"  style="stroke:#006600;"/>
        <line x1="30" y1="10" x2="110" y2="10"  style="stroke:#006600;"/>
</svg>

渲染图片结果如下：

直线的起点为x1和y1属性值所设置的点。

直线的终点为x2和y2属性值指定的点。

style属性可以设置线条的颜色和粗细。在后面的章节中将会更详细地介绍样式属性。