The stroke-dasharray attribute is a presentation attribute defining the pattern of dashes used to paint the outline of the shape.
Syntax:
stroke-dasharray="number pattern"
Attribute Values:
- dasharray: The pattern stroke that will have.
We will use the stoke-dasharray attribute for setting the pattern of the stroke.
Example 1: In this example we will use the stroke-dasharray attribute for setting the pattern of line.
<!DOCTYPE html>
<html>
<body>
<svg viewBox="0 0 50 20"
xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="1" x2="30" y2="1" stroke="green" />
<line x1="0" y1="3" x2="30" y2="3" stroke="green"
stroke-dasharray="4 1 2 3" />
</svg>
</body>
</html>
Output:
Example 2: In this example we will use the stroke-dasharray attribute for setting the pattern of circle
<!DOCTYPE html>
<html>
<body>
<svg viewBox="0 0 50 21"
xmlns="http://www.w3.org/2000/svg">
<circle x="12" y="3" r="5"
cx="10" cy="10" stroke="green"/>
<circle x="12" y="3" r="5"
cx="25" cy="10" stroke="green"
stroke-dasharray="4 1 2 3" />
</svg>
</body>
</html>
Output:
