Cách hoạt động của các mẫu nét vẽ-dasharray PlatoBlockchain Data Intelligence. Tìm kiếm dọc. Ái.

Cách hoạt động của các mẫu stroke-dasharray

Dấu thời gian: 15:2022 chiều ngày 3 tháng 43 năm XNUMX

Giả sử bạn có một dòng trong SVG:

<svg>
  <line x1="0" y1="30" x2="500" y2="30" stroke-color="#f8a100" />
</svg>

Bạn có thể sử dụng stroke-dasharray thuộc tính trong CSS để tạo dấu gạch ngang:

line {
  stroke-dasharray: 5;
}

Đó 5 giá trị là một đơn vị tương đối dựa trên kích thước của SVG viewBox. Chúng tôi thực sự có thể sử dụng bất kỳ độ dài CSS nào. Nhưng những gì nó làm là tạo ra một mẫu dấu gạch ngang dài 5 đơn vị với khoảng cách 5 đơn vị giữa chúng.

Càng xa càng tốt. Chúng ta có thể sử dụng hai giá trị trong đó giá trị thứ hai đặt độ dài khoảng cách riêng lẻ:

Bây giờ chúng ta có dấu gạch ngang là 5 đơn vị và khoảng trống là 10. Hãy thử một giá trị thứ ba:

Hãy xem chúng ta đang hình thành một khuôn mẫu ở đây như thế nào? Nó đi:

  • Dấu gạch ngang: 5 đơn vị
  • Khoảng trống: 10 đơn vị
  • Dấu gạch ngang: 15 đơn vị

Bạn sẽ nghĩ rằng nó lặp lại sau đó theo cùng một nhịp. Nhưng không! Nếu có, chúng ta sẽ có những dấu gạch ngang va vào nhau:

  • Dấu gạch ngang: 5 đơn vị
  • Khoảng trống: 10 đơn vị
  • Dấu gạch ngang: 15 đơn vị
  • Dấu gạch ngang: 5 đơn vị
  • Khoảng trống: 10 đơn vị
  • Dấu gạch ngang: 15 đơn vị
  • …và như thế.

Thay vào đó, stroke-dasharray nhận được tất cả thông minh và nhân bản mẫu nếu có một số giá trị lẻ Vì vậy…

stroke-dasharray: 5 10 15;

/* is the same as */
stroke-dasharray: 5 10 15 5 10 15;

Đó thực sự là lý do tại sao một giá trị duy nhất hoạt động! Trước đó, chúng tôi đã tuyên bố một đĩa đơn 5 giá trị. Điều đó thực sự giống như nói stroke-dasharray: 5 5. Nếu không có giá trị thứ hai, stroke-dasharray sao chép ngầm giá trị đầu tiên để có được một mẫu có thể lặp lại. Nếu không, nó sẽ chỉ là một đường gạch ngang liền mạch dài 5 đơn vị, nhưng không có khoảng cách giữa chúng!

Các hoa văn cũng phụ thuộc vào kích thước của chính hình dạng. SVG của chúng tôi line là 500 đơn vị. Hãy đặt lớn hơn stroke-dasharray và thêm chúng lên:

stroke-dasharray: 10 20 30 40 50; /* 150 units */

Nếu mẫu chạy bốn lần (150 đơn vị ⨉ 4 lần lặp), chúng tôi đang xử lý tổng số 600 đơn vị. 100 đơn vị bổ sung đó được loại bỏ để ngăn mẫu tự tràn ra.

Đó là tất cả.

🎩 Đầu mũ để Vũ điệu Joshua cho gọi cái này ra!

Dấu thời gian:

Thêm từ Thủ thuật CSS