Insults-dasharray - CSS-triki

Anonim

stroke-dasharrayĪpašums CSS ir radīt domuzīmes trieka SVG formas. Jo lielāks skaitlis, jo vairāk vietas insultā starp domuzīmēm.

.module ( stroke-dasharray: 5; )

Atcerieties:

  • Tas būs ignorēt prezentācijas atribūtu
  • Tas nebūs ignorēt inline stila piemēram

Vērtības

stroke-dasharrayĪpašumu var pieņemt jebkuru garumu, tajā skaitā unitless vērtībām:

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

Vienības vērtības, visticamāk, ir visizplatītākā izvēle, kā tas parasti ir ar SVG vērtībām. Tie kļūst par garuma mērvienībām, kas ir salīdzinājumā ar koordinātu sistēmu, kuru izveidojusi viewBox.

Vietnē CodePen skatiet CSS-Tricks (@ css-tricks) rekvizītu Pen stroke-dasharray.

Kļūst triks ar stroke-dasharray

Vai esat kādreiz redzējuši tos foršos demonstrācijas, kur, šķiet, ka SVG forma velk sevi? Tas ir triks, kas aizņem stroke-dasharrayelementu un atdzīvina to kopā ar stroke-dashoffsetīpašumu.

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

Skatiet Krista Koijera (@chriscoyier) SVG līnijas zīmēšanas, atpakaļ un uz priekšu, pildspalvveida pilnšļirci vietnē CodePen.

Šajā amatā mēs daudz detalizētāk aplūkojam šo tehniku. Izskatās, ka IE 11 un jaunākām versijām nepatīk insulta īpašību animēšana ar @keyframes, tāpēc esiet tur uzmanīgs.

Saistīts

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

Vairāk informācijas

  • SVG 1.1 Spec
  • MDN uz pildījumiem un insultiem

Pārlūka atbalsts

Chrome Safari Firefox Opera IE Android iOS
Jā Jā Jā Jā 9+ 4.4+ Jā