Строке-дасхоффсет - ЦСС-трикови

Anonim

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