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