SVG stroke-dasharray Attribute
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:
Last Updated :
31 Mar, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...