Các stroke-dashoffsetbất động sản trong CSS xác định vị trí dọc theo một con đường SVG nơi chút một strokesẽ bắt đầu. Con số càng cao, các dấu gạch ngang sẽ bắt đầu dọc theo con đường.
.module ( stroke-dashoffset: 100; )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-dashoffsetbất động sản có thể chấp nhận một tỷ lệ phần trăm hay một giá trị số.
stroke-dashoffset: 100stroke-dashoffset: 25%
Lưu ý rằng các đơn vị (tức là emvà px) là không bắt buộc. Một số không có đơn vị được hiển thị theo đơn vị pixel. Phần trăm có liên quan đến phần trăm của khung nhìn hiện tại.
Xem thuộc tính Pen stroke-dashoffset của CSS-Tricks (@ css-trick) trên CodePen.
Bắt lừa với stroke-dashoffset
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 làm hoạt hình stroke-dashoffsetcủa một phần tử kết hợp với thuộc stroke-dasharraytí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ó liên quan
strokestroke-dasharraystroke-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 |