<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1000 200">
<polyline points="100,50 200,150 300,75 400,175 700,25 900,150"
stroke="#e89a3e"
stroke-width="4"
fill="none"
opacity="1.0" />
</svg>
The Attributes
Here are the attributes used to define our polyline:
- points: A list of points, each containing an x and y coordinate, and separated by a space or end-of-line character.
- stroke: The color of the line. This value can be defined either by specifying a hexadecimal color code as we did above or by using a valid color name.
- stroke-width: The width of the line output to the screen, relative to the size of the viewbox.
- opacity: Determines if the line will have any transparency. Valid decimal values can be between 0.0 (invisible) and 1.0 (fully visible). A value of 0.5 would give the line 50% transparency.
Other SVG Paths & Shapes
Lines
Polygons
Rectangles
Circles
Ellipses
Comments
There are no comments yet. Start the conversation!