Скажем, у вас есть строка в SVG:
<svg>
<line x1="0" y1="30" x2="500" y2="30" stroke-color="#f8a100" />
</svg>Вы можете использовать stroke-dasharray свойство в CSS для создания тире:
line {
stroke-dasharray: 5;
}То, что 5 value – это относительная единица, основанная на размере 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 единиц обрезаются, чтобы шаблон не переполнялся.
Это все.
🎩 Шляпный наконечник Джошуа Дэнс для вызывая это!
