CSS stroke-dashoffset Property
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" > w3wiki </ h1 > < b > CSS | stroke-dashoffset </ b > < div class = "container" > < svg width = "400px" 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 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" > w3wiki </ h1 > < b > CSS | stroke-dashoffset </ b > < div class = "container" > < svg width = "500px" height = "250px" 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: 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" > w3wiki </ h1 > < b > CSS | stroke-dashoffset </ b > < div class = "container" > < svg width = "400px" 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:
Supported Browsers: The browsers supported by stroke-dashoffset property are listed below:
- Chrome
- Firefox
- Safari
- Opera
- Internet Explorer 9
Contact Us