Мождани удар-дашарај - ЦСС-трикови

Anonim

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+ да