13.SVG polyline元素

• SVG Polyline视频教程

• SVG Polyline示例

我们可以使用<polyline>元素绘制多条连接线（poly = multiple）。

SVG Polyline视频教程

本节视频教程如下：

SVG Polyline示例

下面是一个简单SVG折线示例：

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <polyline points="0,0  30,0  15,30"
        style="stroke:#006600;"/>
</svg>

结果图片如下：

多条线是由多个点标识。每个点都是points属性中的x,y值。这个例子通过三个点定义了一个三角形。

这三个点通过直线连接，并被填充。默认的填充色为黑色。下面的例子指定了一个不同的填充色：

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <polyline points="10,2  60,2  35,52"
        style="stroke:#006600; stroke-width: 2;
               fill: #33cc33;"/>
</svg>

你可能会发现，三角形中只有两条边有边框色（深绿色）。因为只有列出的点之间的线被绘制，并没有绘制回到第一个点的线。为了绘制这条线，需要将第一个点再加到points属性中，如下所示：

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <polyline points="10,2  60,2  35,52  10,2"
        style="stroke:#006600; fill: #33cc33;"/>
</svg>

style属性设置了边框的颜色以及填充色。后面会对样式属性作详细介绍。