CSS stroke-dasharray Property
Last Updated :
08 Jun, 2023
The stroke-dasharray property is used to set the pattern of dashes and gaps used in the stroke of SVG shapes. A larger value indicates a larger number of dashes. Different values can be specified in the array parameter to change the pattern.
Syntax:
stroke-dasharray: <dasharray> | none
Property Values:
- dasharray: It is used to set the pattern with a list of values separated by commas or white space. The values can be both in terms of length units or percentages that specify the dashes and gaps in the pattern.
- none: It is used to specify that no pattern would be used. It is the default value.
Example 1: Setting the density of the dashes in lines.
html
<!DOCTYPE html>
< html >
< head >
< title >
CSS | stroke-dasharray property
</ title >
< style >
.stroke1 {
stroke-dasharray: 20;
stroke: green;
stroke-width: 20;
}
.stroke2 {
stroke-dasharray: 40;
stroke: red;
stroke-width: 20;
}
.stroke3 {
stroke-dasharray: 80;
stroke: orange;
stroke-width: 20;
}
</ style >
</ head >
< body >
< h1 style = "color: green" >
GeeksforGeeks
</ h1 >
< b >
CSS | stroke-dasharray
</ b >
< div class = "container" >
< svg height = "250px"
width = "500px"
version = "1.1" >
< line class = "stroke1" x1 = "0" x2 = "350" y1 = "20" y2 = "20" />
< line class = "stroke2" x1 = "0" x2 = "350" y1 = "70" y2 = "70" />
< line class = "stroke3" x1 = "0" x2 = "350" y1 = "120" y2 = "120" />
</ svg >
</ div >
</ body >
</ html >
|
Output:
Example 2: Setting the density of the dashes in circles.
html
<!DOCTYPE html>
< html >
< head >
< title >
CSS | stroke-dasharray property
</ title >
< style >
.stroke1 {
stroke-dasharray: 10;
stroke: green;
stroke-width: 20;
}
.stroke2 {
stroke-dasharray: 20;
stroke: red;
stroke-width: 20;
}
.stroke3 {
stroke-dasharray: 40;
stroke: orange;
stroke-width: 20;
}
</ style >
</ head >
< body >
< h1 style = "color: green" >
GeeksforGeeks
</ h1 >
< b >
CSS | stroke-dasharray
</ b >
< div class = "container" >
< svg height = "250px"
width = "500px"
version = "1.1" >
< circle class = "stroke1" cx = "100" cy = "100" r = "50" />
< circle class = "stroke2" cx = "250" cy = "100" r = "50" />
< circle class = "stroke3" cx = "400" cy = "100" r = "50" />
</ svg >
</ div >
</ body >
</ html >
|
Output:
Example 3: Setting the pattern of the dashes.
html
<!DOCTYPE html>
< html >
< head >
< title >
CSS | stroke-dasharray property
</ title >
< style >
.stroke1 {
stroke-dasharray: 10;
stroke: green;
stroke-width: 20;
}
.stroke2 {
stroke-dasharray: 20;
stroke: red;
stroke-width: 20;
}
.stroke3 {
stroke-dasharray: 40;
stroke: orange;
stroke-width: 20;
}
</ style >
</ head >
< body >
< h1 style = "color: green" >
GeeksforGeeks
</ h1 >
< b >
CSS | stroke-dasharray
</ b >
< div class = "container" >
< svg height = "250px"
width = "500px"
version = "1.1" >
< circle class = "stroke1" cx = "100" cy = "100" r = "50" />
< circle class = "stroke2" cx = "250" cy = "100" r = "50" />
< circle class = "stroke3" cx = "400" cy = "100" r = "50" />
</ svg >
</ div >
</ body >
</ html >
|
Output:
Supported Browsers: The browsers supported by stroke-dasharray property are listed below:
- Chrome
- Firefox
- Safari
- Opera
- Internet Explorer 9
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...