Удар-dasharray - CSS-трикове

Anonim

В stroke-dasharrayимота в CSS е за създаване на тирета в хода на SVG форми. Колкото по-голямо е числото, толкова повече пространство между чертичките в щриха.

.module ( stroke-dasharray: 5; )

Помня:

  • Това ще замени атрибута на презентацията
  • Това няма да замени вградения стил, напр

Стойности

В stroke-dasharrayимота може да приеме всякаква дължина, включително и мерна единица стойности:

  • stroke-dasharray: 2
  • stroke-dasharray: 2.5
  • stroke-dasharray: 2em
  • stroke-dasharray: 15%

Безразмерните стойности са най-често срещаният избор, както обикновено е при SVG стойностите. Те се превръщат в единици за дължина, които са спрямо координатната система, създадена от viewBox.

Вижте свойството Pen stroke-dasharray от CSS-Tricks (@ css-tricks) на CodePen.

Първи Tricky с stroke-dasharray

Виждали ли сте онези страхотни демонстрации, в които се появява форма на SVG, за да се нарисува? Това е трик, който приема stroke-dasharrayелемента и го анимира заедно със stroke-dashoffsetсвойството.

.path ( stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear forwards; ) @keyframes dash ( to ( stroke-dashoffset: 0; ) )

Вижте основния пример за писане на черта на SVG, назад и напред от Chris Coyier (@chriscoyier) на CodePen.

Ние разглеждаме тази техника много по-подробно в тази публикация. Изглежда, че IE 11 и надолу не харесват анимирането на свойствата на щриха с @keyframes, така че бъдете внимателни там.

Свързани

  • stroke
  • stroke-dashoffset
  • stroke-linecap
  • stroke-width

Повече информация

  • SVG 1.1 Спецификация
  • MDN при запълване и щрихи

Поддръжка на браузър

Chrome Сафари Firefox Опера IE Android iOS
Да Да Да Да 9+ 4.4+ Да