Skip to content

Latest commit

 

History

History
70 lines (47 loc) · 2.19 KB

13.SVG-polyline元素.md

File metadata and controls

70 lines (47 loc) · 2.19 KB
Raw

SVG polyline元素

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

SVG Polyline视频教程

本节视频教程如下：

<iframe width="560" height="315" src="//www.youtube.com/embed/6sGpaZih3Yc?list=PLL8woMHwr36F2tCFnWTbVBQAGQ6nTcXOO" frameborder="0" allowfullscreen=""></iframe>

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>

结果图片如下：

<polyline points="0,2  50,2  25,52" style="stroke:#006600;"></polyline>

多条线是由多个点标识。每个点都是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>
<polyline points="10,2  60,2  35,52  10,2" style="stroke:#006600; stroke-width: 2; fill: #33cc33;"></polyline>

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