SVG polyline element
Jakob Jenkov |
The SVG <polyline> element is used to draw multiple connected lines (poly = multiple).
SVG Polyline - Video Tutorial
Here is a video version of this tutorial:
SVG Polyline Example
Here is a simple SVG polyline example:
<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>
Here is the resulting image:
The multiple lines are identified by points. Each point is listed as x,y in the points attribute.
This example had 3 points which defined a triangle.
The 3 points are joined by lines, and then filled. The default fill-color is black. Here is an example that specifies a fill color different from black:
<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>
You may notice that only two of the lines in the triangle are drawn with the stroke color (darker green).
The reason is, that only lines between the points listed are drawn. There is no line drawn back to the first
point. To do this, add the first point to the points attributes again, like this:
<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>
The style attribute sets the color and thickness of the stroke (the line) and the fill color. Style
attributes are covered in more detail in a different text.
| Tweet | |
Jakob Jenkov | |
