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" <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" <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: