SVG - Polyline
Advertisements
<polyline> element is used to draw a connected straight lines.
Declaration
Following is the syntax declaration of <polyline> element. We've shown main attributes only.
<polyline points="list of points" > </polyline>
Attributes
Sr.No. | Name&Description |
---|---|
1 | points − List of points to make up a polyline. |
Example
testSVG.htm<html> <title>SVG Polyline</title> <body> <h1>Sample SVG Polyline Image</h1> <svg width="800" height="800"> <g> <text x="0" y="15" fill="black" >Polyline #1: Without opacity.</text> <polyline points="150,75 258,137.5 258,262.5 150,325 42,262.6 42,137.5" stroke="black" stroke-width="3" fill="none"></polyline> </g> </svg> </body> </html>
Output
Open textSVG.htm in Chrome web browser. You can use Chrome/Firefox/Opera to view SVG image directly without any plugin. Internet Explorer 9 and higher also supports SVG image rendering.
Polyline with opacity
<html> <title>SVG Polyline</title> <body> <h1>Sample SVG Polyline Image</h1> <svg width="800" height="800"> <g> <text x="0" y="15" fill="black" >Polyline #2: With opacity </text> <polyline points="150,75 258,137.5 258,262.5 150,325 42,262.6 42,137.5" style="fill:none;stroke-width:3; stroke:rgb(0,0,0);stroke-opacity:0.5;"></polyline> </g> </svg> </body> </html>
Output
Open textSVG.htm in Chrome web browser. You can use Chrome/Firefox/Opera to view SVG image directly without any plugin. Internet Explorer 9 and higher also supports SVG image rendering.
svg_shapes.htm
Advertisements