Insult-dasharray - CSS-trikid

Anonim

stroke-dasharrayVara CSS on luua kriipsud insult SVG kujundeid. Mida suurem on number, seda rohkem on kriipsu vahel löögi vahel.

.module ( stroke-dasharray: 5; )

Pidage meeles:

  • See on alistada esitlus atribuut
  • See ei alista sisemist stiili, nt

Väärtused

stroke-dasharrayVara võib nõustuda mis tahes pikkusega, sealhulgas ühikuta väärtused:

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

Ühikuväärtused on tõenäoliselt kõige tavalisem valik, nagu tavaliselt SVG väärtuste puhul. Need muutuvad pikkuse mõõtühikuteks, mis on võrdelised koordinaatide süsteemiga viewBox.

Vaadake CodePenilt CSS-Tricks (@ css-tricks) atribuuti Pen stroke-dasharray.

Trikkiks saamine stroke-dasharray

Kas olete kunagi näinud neid lahedaid demosid, kus SVG kuju näib end joonistavat? See on trikk, mis võtab stroke-dasharrayelemendi ja animeerib selle koos stroke-dashoffsetomadusega.

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

Vaadake Chris Coyieri (@chriscoyier) CodePenil olevat pliiatsi põhinäidet SVG joonejoonistamisest, tagurpidi ja edasi.

Seda tehnikat käsitleme selles postituses palju üksikasjalikumalt. Tundub, et IE 11-le ja vanematele versioonidele ei meeldi joonteomaduste animeerimine @keyframes'iga, seega olge seal ettevaatlik.

Seotud

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

Rohkem informatsiooni

  • SVG 1.1 spetsifikatsioon
  • MDN täidistel ja löökidel

Brauseri tugi

Chrome Safari Firefox Ooper IE Android iOS
Jah Jah Jah Jah 9+ 4.4+ Jah