The stroke-dashoffset property is used to set the location along an SVG path where the dash pattern of a stroke will begin. A higher value means that the dash will start at a further location.
Syntax:
stroke-dasharray: <length> | <percentage>
Property Values:
- length: It is used to set the offset in length units. The values are resolved on the basis of the path length of the element.
- percentage: It is used to set the offset in percentage values. The values are resolved as a percentage of the current viewport.
Example 1: Setting the offset of the dashes in lines.
html
<!DOCTYPE html><html>
<head>
<title>
CSS | stroke-dashoffset
</title>
<style>
.stroke1 {
stroke-dashoffset: 0;
stroke: green;
stroke-dasharray: 40;
stroke-width: 20px;
}
.stroke2 {
stroke-dashoffset: 15px;
stroke: red;
stroke-dasharray: 40;
stroke-width: 20px;
}
.stroke3 {
stroke-dashoffset: 30px;
stroke: orange;
stroke-dasharray: 40;
stroke-width: 20px;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
CSS | stroke-dashoffset
</b>
<div class="container">
<svg width="400px"
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 offset of the dashes in circles.
html
<!DOCTYPE html><html>
<head>
<title>
CSS | stroke-dashoffset
</title>
<style>
.stroke1 {
stroke-dashoffset: 0;
stroke: green;
stroke-dasharray: 40;
stroke-width: 10px;
}
.stroke2 {
stroke-dashoffset: 15px;
stroke: red;
stroke-dasharray: 40;
stroke-width: 10px;
}
.stroke3 {
stroke-dashoffset: 30px;
stroke: orange;
stroke-dasharray: 40;
stroke-width: 10px;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
CSS | stroke-dashoffset
</b>
<div class="container">
<svg width="500px"
height="250px"
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: Setting the offset of the dashes in lines.
html
<!DOCTYPE html><html>
<head>
<title>
CSS | stroke-dashoffset
</title>
<style>
.stroke1 {
stroke-dashoffset: 0%;
stroke: green;
stroke-dasharray: 40;
stroke-width: 20px;
}
.stroke2 {
stroke-dashoffset: 50%;
stroke: red;
stroke-dasharray: 40;
stroke-width: 20px;
}
.stroke3 {
stroke-dashoffset: 100%;
stroke: orange;
stroke-dasharray: 40;
stroke-width: 20px;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
CSS | stroke-dashoffset
</b>
<div class="container">
<svg width="400px"
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:
Supported Browsers: The browsers supported by stroke-dashoffset property are listed below:
- Chrome
- Firefox
- Safari
- Opera
- Internet Explorer 9