stroke-dashoffsetИмовина у ЦСС дефинише локације дуж СВГ путању где црта олуја са strokeће почети. Што је број већи, цртице ће даље почети дуж путање.
.module ( stroke-dashoffset: 100; )Запамтити:
- Ово ће заменити атрибут презентације
- Ово неће заменити уграђени стил, нпр
Вредности
stroke-dashoffsetИмовина може да прихвати проценат или нумеричку вредност.
stroke-dashoffset: 100stroke-dashoffset: 25%
Имајте на уму да јединице (тј. emИ px) нису потребне. Број без јединица приказује се у пиксел јединицама. Проценат је у односу на проценат тренутне области приказа.
Погледајте својство Пен строке-дасхоффсет компаније ЦСС-Трицкс (@ цсс-трицкс) на ЦодеПен-у.
Добијам лукав са stroke-dashoffset
Да ли сте икада видели оне супер демонстрације у којима се чини да се СВГ облик црта? То је трик који анимира stroke-dashoffsetелемент у вези са stroke-dasharrayсвојством.
.path ( stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear forwards; ) @keyframes dash ( to ( stroke-dashoffset: 0; ) )Погледајте основни пример оловке за цртање СВГ линија уназад и унапред од Цхрис Цоииер-а (@цхрисцоииер) на ЦодеПен-у.
Ову технику обрађујемо много детаљније у овом посту.
Повезан
strokestroke-dasharraystroke-linecapstroke-width
Више информација
- СВГ 1.1 Спец
- МДН на испунама и потезима
Подршка прегледача
| Хром | Сафари | Фирефок | Опера | ИЕ | Андроид | иОС |
|---|---|---|---|---|---|---|
| да | да | да | да | 9+ | 4.4+ | да |