stroke-dashoffsetВластивість в CSS визначає місце розташування уздовж шляху SVG , де межа strokeпочнеться. Чим більше число, тим далі по шляху почнуться риски.
.module ( stroke-dashoffset: 100; )Запам’ятайте:
- Це буде перевизначити атрибут уявлення
- Це не замінить вбудований стиль, наприклад
Цінності
stroke-dashoffsetВластивість може приймати відсоток або числове значення.
stroke-dashoffset: 100stroke-dashoffset: 25%
Зверніть увагу, що одиниці (тобто emі px) не потрібні. Число без одиниць відображається в піксельних одиницях. Відсоток відносно відсотка поточного вікна перегляду.
Перегляньте властивість Pen stroke-dashoffset від CSS-Tricks (@ css-tricks) на CodePen.
Отримання хитрого з stroke-dashoffset
Ви коли-небудь бачили ці круті демонстрації, де фігура SVG, здається, малює себе? Це фокус, який анімує stroke-dashoffsetелемент у поєднанні з stroke-dasharrayвластивістю.
.path ( stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear forwards; ) @keyframes dash ( to ( stroke-dashoffset: 0; ) )Див. Основний приклад ручного малювання SVG, вперед і назад від Кріс Койєр (@chriscoyier) на CodePen.
Ми розглядаємо цю техніку набагато детальніше в цій публікації.
Пов’язані
strokestroke-dasharraystroke-linecapstroke-width
Більше інформації
- SVG 1.1 Специфікація
- MDN на заливки та штрихи
Підтримка браузера
| Chrome | Сафарі | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Так | Так | Так | Так | 9+ | 4,4+ | Так |