- SVG Tutorial
- SVG - Home
- SVG - Overview
- SVG - Shapes
- SVG - Text
- SVG - Stroke
- SVG - Filters
- SVG - Patterns
- SVG - Gradients
- SVG - Interactivity
- SVG - Linking
- SVG Demo
- SVG - Loaders
- SVG - Dialog
- SVG - Icons
- SVG - Clock
- SVG - Drag
- SVG - Key point
- SVG - Maps
- SVG - amChart
- SVG - Graph
- SVG - Flat Surface Shade
- SVG - Image Filter
- SVG - Text Effects
- SVG - Text With CSS Effects
- SVG - Arrow Effects
- SVG - Brand Effects
- SVG - Gooey Effects
- SVG - Gradients Effects
- SVG - Playful Effects
- SVG - Scroll Effects
- SVG - Side Show Effects
- SVG - Tab Effects
- SVG - Raphael.js Effects
- SVG - Velocity.js Effects
- SVG - Walkway.js Effects
- SVG - zPath.js Effects
- SVG - Vague.js Effects
- SVG - Transformation Effects
- SVG - Full Screen Overlay Effects
- SVG - Lazylinepainter.js Effects
- SVG - Demo Game
- SVG - Real Time SVG AD
- SVG Useful Resources
- SVG - Questions and Answers
- SVG - Quick Guide
- SVG - Useful Resources
- SVG - Discussion
SVG - Polyline
<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
To Continue Learning Please Login
Login with Google