CSS stroke-dasharray Property
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" > w3wiki </ h1 > < b > CSS | stroke-dasharray </ b > < div class = "container" > < svg height = "250px" width = "500px" xmlns = "http://www.w3.org/2000/svg" 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" > w3wiki </ h1 > < b > CSS | stroke-dasharray </ b > < div class = "container" > < svg height = "250px" width = "500px" xmlns = "http://www.w3.org/2000/svg" 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" > w3wiki </ h1 > < b > CSS | stroke-dasharray </ b > < div class = "container" > < svg height = "250px" width = "500px" xmlns = "http://www.w3.org/2000/svg" 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
Contact Us