Aivohalvaus - CSS-temppuja

Anonim

stroke-dasharrayOmaisuus CSS on luoda ajatusviivat aivohalvaus SVG muotoja. Mitä suurempi luku, sitä enemmän tilaa viivan välissä viivassa.

.module ( stroke-dasharray: 5; )

Muistaa:

  • Tämä tulee ohittaa esityksen määrite
  • Tämä ei korvaa linjatyyliä esim

Arvot

stroke-dasharrayOmaisuus voi hyväksyä matkalla, josta unitless arvot:

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

Yksikkömättömät arvot ovat todennäköisesti yleisin valinta, kuten yleensä SVG-arvojen kanssa. Ne muuttuvat pituusyksiköiksi, jotka ovat suhteessa viewBox.

Katso CSS-Tricks (@ css-tricks) -kynän lyönti-dasharray-ominaisuus CodePenistä.

Hankkiminen hankalaksi stroke-dasharray

Oletko koskaan nähnyt niitä hienoja demoja, joissa SVG-muoto näyttää vetävän itsensä? Se on temppu, joka ottaa stroke-dasharrayelementin ja animoi sen yhdessä stroke-dashoffsetominaisuuden kanssa.

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

Katso kynän perusesimerkki Chris Coyierin (@chriscoyier) SVG-viivapiirroksesta, taaksepäin ja eteenpäin CodePenissä.

Käsittelemme tätä tekniikkaa paljon yksityiskohtaisemmin tässä viestissä. Näyttää siltä, ​​että IE 11 ja uudemmat eivät tykkää animoida aivohalvausominaisuuksia @keyframeilla, joten ole varovainen siellä.

Liittyvät

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

Lisää tietoa

  • SVG 1.1 Erittely
  • MDN täytteissä ja aivohalvauksissa

Selaimen tuki

Kromi Safari Firefox Ooppera IE Android iOS
Joo Joo Joo Joo 9+ 4.4+ Joo