stroke-dashoffset
Имовина у ЦСС дефинише локације дуж СВГ путању где црта олуја са stroke
ће почети. Што је број већи, цртице ће даље почети дуж путање.
.module ( stroke-dashoffset: 100; )
Запамтити:
- Ово ће заменити атрибут презентације
- Ово неће заменити уграђени стил, нпр
Вредности
stroke-dashoffset
Имовина може да прихвати проценат или нумеричку вредност.
stroke-dashoffset: 100
stroke-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; ) )
Погледајте основни пример оловке за цртање СВГ линија уназад и унапред од Цхрис Цоииер-а (@цхрисцоииер) на ЦодеПен-у.
Ову технику обрађујемо много детаљније у овом посту.
Повезан
stroke
stroke-dasharray
stroke-linecap
stroke-width
Више информација
- СВГ 1.1 Спец
- МДН на испунама и потезима
Подршка прегледача
Хром | Сафари | Фирефок | Опера | ИЕ | Андроид | иОС |
---|---|---|---|---|---|---|
да | да | да | да | 9+ | 4.4+ | да |