Скажімо, у вас є рядок у SVG:
<svg>
<line x1="0" y1="30" x2="500" y2="30" stroke-color="#f8a100" />
</svg>Ви можете використовувати stroke-dasharray властивість у CSS робити тире:
line {
stroke-dasharray: 5;
}Що 5 значення — це відносна одиниця, що базується на розмірі SVG viewBox. Насправді ми можемо використовувати будь-яку довжину CSS. Але те, що він робить, це створює шаблон з тире довжиною 5 одиниць з 5 одиничними проміжками між ними.
Все йде нормально. Ми можемо використовувати два значення, де друге значення окремо встановлює довжину розриву:
Тепер ми маємо тире, які дорівнюють 5 одиницям, і прогалини, які дорівнюють 10. Давайте спробуємо третє значення:
Бачите, як ми тут формуємо шаблон? Це йде:
- Тире: 5 од
- Розрив: 10 одиниць
- Тире: 15 од
Можна подумати, що це повторюється після цього в тій самій каденції. Але не! Якби це було так, у нас би тире натикалися одна на одну:
- Тире: 5 од
- Розрив: 10 одиниць
- Тире: 15 од
- Тире: 5 од
- Розрив: 10 одиниць
- Тире: 15 од
- …і так далі.
Замість цього, stroke-dasharray стає розумним і дублює шаблон, якщо є непарна кількість значень. Отже...
stroke-dasharray: 5 10 15;
/* is the same as */
stroke-dasharray: 5 10 15 5 10 15;Ось чому єдине значення працює! Раніше ми оголосили сингл 5 значення. Це те саме, що сказати stroke-dasharray: 5 5. Без другого значення, stroke-dasharray неявно дублює перше значення, щоб отримати повторюваний шаблон. Інакше це була б суцільна лінія тире довжиною 5 одиниць, але без проміжків між ними!
Викрійка також залежить від розміру самої форми. Наш SVG line становить 500 одиниць. Поставимо більший stroke-dasharray значення та скласти їх:
stroke-dasharray: 10 20 30 40 50; /* 150 units */Якщо шаблон виконується чотири рази (150 одиниць ⨉ 4 ітерації), ми маємо справу з 600 одиницями. Ці додаткові 100 одиниць обрізаються, щоб запобігти переповненню шаблону.
Це все.
🎩 Головний убір Джошуа Денс та цінності викликаючи це!
