Обведення-дашаррей - 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 на заливки та штрихи

Підтримка браузера

Chrome Сафарі Firefox Опера IE Android iOS
Так Так Так Так 9+ 4,4+ Так