stroke-dasharray
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.
Thuộc tính stroke-dasharray là một thuộc tính trình bày xác định mẫu các đoạn gạch và khoảng trống dùng để vẽ viền của hình dạng.
Note:
Là một thuộc tính trình bày, stroke-dasharray cũng có một thuộc tính CSS tương ứng: stroke-dasharray. Khi cả hai được chỉ định, thuộc tính CSS sẽ được ưu tiên.
Bạn có thể dùng thuộc tính này với các phần tử SVG sau:
Ví dụ
<svg viewBox="0 0 30 12" xmlns="http://www.w3.org/2000/svg">
<style>
line {
stroke: black;
}
</style>
<!-- Không có đoạn gạch hay khoảng trống -->
<line x1="0" y1="1" x2="30" y2="1" />
<!-- Các đoạn gạch và khoảng trống cùng kích thước -->
<line x1="0" y1="3" x2="30" y2="3" stroke-dasharray="4" />
<!-- Các đoạn gạch và khoảng trống có kích thước khác nhau -->
<line x1="0" y1="5" x2="30" y2="5" stroke-dasharray="4 1" />
<!-- Các đoạn gạch và khoảng trống có nhiều kích thước với số lượng giá trị lẻ -->
<line x1="0" y1="7" x2="30" y2="7" stroke-dasharray="4 1 2" />
<!-- Các đoạn gạch và khoảng trống có nhiều kích thước với số lượng giá trị chẵn -->
<line x1="0" y1="9" x2="30" y2="9" stroke-dasharray="4 1 2 3" />
<!-- Các đoạn gạch bắt đầu bằng một khoảng trống -->
<line x1="0" y1="11" x2="30" y2="11" stroke-dasharray="0 4 0" />
</svg>
Ghi chú sử dụng
| Giá trị | none | <dasharray> |
|---|---|
| Giá trị mặc định | none |
| Có thể hoạt ảnh | Yes |
- <dasharray>
-
Danh sách các giá trị
<length>và<percentage>được phân tách bằng dấu phẩy và/hoặc khoảng trắng, xác định độ dài xen kẽ của các đoạn gạch và khoảng trống.Nếu cung cấp số lượng giá trị lẻ, danh sách giá trị sẽ được lặp lại để tạo thành số lượng giá trị chẵn. Vì vậy,
5,3,2tương đương với5,3,2,5,3,2.
Đặc tả
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # StrokeDashing |
Tương thích trình duyệt
Xem thêm
- Thuộc tính CSS
stroke-dasharray