Инсульт-дашаррай - 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.

Сложно с 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, назад и вперед» Криса Койера (@chriscoyier) на CodePen.

Мы рассмотрим эту технику более подробно в этом посте. Похоже, что IE 11 и ниже не любит анимировать свойства обводки с помощью @keyframes, поэтому будьте осторожны.

Связанный

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

Дополнительная информация

  • SVG 1.1 Спецификация
  • MDN по заливкам и штрихам

Поддержка браузера

Хром Сафари Fire Fox Опера IE Android iOS
да да да да 9+ 4.4+ да