Thuộc tính stroke-dashoffset dùng để đặt vị trí bắt đầu cho mẫu gạch nối của đường viền SVG. Giá trị cao hơn nghĩa là gạch nối bắt đầu ở vị trí xa hơn.
Syntax
stroke-dasharray: <length> | <percentage>
Property Values
- length: Nó được dùng để thiết lập độ lệch theo đơn vị độ dài. Các giá trị được giải quyết dựa trên độ dài đường dẫn của phần tử.
- percentage: Nó được dùng để thiết lập độ lệch theo giá trị phần trăm. Các giá trị được giải quyết theo tỷ lệ phần trăm của viewport hiện tại.
Example 1: Ở đây thuộc tính CSS stroke-dashoffset điều chỉnh điểm bắt đầu của đường nét đứt trong SVG. Ba đường thẳng được tạo kiểu với các offset và màu sắc khác nhau.
html<!DOCTYPE html>
<html>
<head>
<title>
CSS stroke-dashoffset Property
</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>
<b>
CSS stroke-dashoffset
</b>
<div class="container">
<svg width="400px" xmlns="https://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: Thiết lập offset của các nét đứt trong hình tròn.
html<!DOCTYPE html>
<html>
<head>
<title>
CSS stroke-dashoffset Property
</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>
<b>
CSS stroke-dashoffset Property
</b>
<div class="container">
<svg width="500px" height="250px"
xmlns="https://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
Các trình duyệt được hỗ trợ bởi thuộc tính stroke-dashoffset được liệt kê dưới đây:
- Chrome
- Firefox
- Safari
- Opera
- Internet Explorer 9