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