Các stroke-dasharraybất động sản trong CSS là để tạo dấu gạch ngang trong đột quỵ hình dạng SVG. Số càng cao thì càng có nhiều khoảng trống ở giữa các dấu gạch ngang trong nét vẽ.
.module ( stroke-dasharray: 5; )Nhớ lại:
- Điều này sẽ ghi đè một thuộc tính trình bày
- Điều này sẽ không ghi đè một kiểu nội tuyến, ví dụ:
Giá trị
Các stroke-dasharraybất động sản có thể chấp nhận bất kỳ chiều dài, bao gồm giá trị unitless:
stroke-dasharray: 2stroke-dasharray: 2.5stroke-dasharray: 2emstroke-dasharray: 15%
Các giá trị không đơn vị có thể là lựa chọn phổ biến nhất, vì nó thường là với các giá trị SVG. Chúng trở thành đơn vị độ dài có liên quan đến hệ tọa độ được thiết lập bởi viewBox.
Xem thuộc tính Pen stroke-dasharray của CSS-Tricks (@ css-trick) trên CodePen.
Bắt lừa với stroke-dasharray
Bạn đã bao giờ nhìn thấy những bản trình diễn thú vị mà một hình dạng SVG xuất hiện để tự vẽ chưa? Đó là một thủ thuật stroke-dasharraysử dụng phần tử và làm động nó kết hợp với thuộc stroke-dashoffsettính.
.path ( stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear forwards; ) @keyframes dash ( to ( stroke-dashoffset: 0; ) )Xem Ví dụ Cơ bản về Bút về Vẽ đường SVG, Lùi và Tiến của Chris Coyier (@chriscoyier) trên CodePen.
Chúng tôi đề cập đến kỹ thuật này chi tiết hơn trong bài đăng này. Có vẻ như IE 11 trở xuống không thích làm động các thuộc tính nét viền bằng @keyframe, vì vậy hãy cẩn thận ở đó.
Có liên quan
strokestroke-dashoffsetstroke-linecapstroke-width
Thêm thông tin
- Thông số SVG 1.1
- MDN về điền và nét
Hỗ trợ trình duyệt
| Trình duyệt Chrome | Safari | Firefox | Opera | I E | Android | iOS |
|---|---|---|---|---|---|---|
| Đúng | Đúng | Đúng | Đúng | 9+ | 4.4+ | Đúng |