Mŕtvica-dasharray - Triky CSS

Anonim

stroke-dasharrayNehnuteľnosť v CSS je pre vytvorenie pomlčky v úderom SVG tvarov. Čím vyššie číslo, tým viac priestoru medzi čiarkami v ťahu.

.module ( stroke-dasharray: 5; )

Pamätajte:

  • To bude prepísať atribút prezentačné
  • To nebude prepísať inline štýle napr

Hodnoty

Toto stroke-dasharrayubytovacie zariadenie akceptuje akékoľvek dĺžky vrátane bezjednotkových hodnôt:

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

Hodnoty bez jednotiek sú pravdepodobne najbežnejšou voľbou, ako to býva pri hodnotách SVG. Stávajú sa z nich dĺžkové jednotky, ktoré sú relatívne k súradnicovému systému nastavenému viewBox.

Prezrite si vlastnosť Pen stroke-dasharray od CSS-Tricks (@ css-tricks) na CodePen.

Začína byť zložitý stroke-dasharray

Už ste niekedy videli tie super ukážky, kde sa zdá, že sa tvar SVG kreslí sám? Jedná sa o trik, ktorý vezme stroke-dasharrayprvok a animuje ho v spojení s stroke-dashoffsetvlastnosťou.

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

Pozrite si základný príklad pera kreslenia čiary SVG, dozadu a dopredu, Chrisa Coyiera (@chriscoyier) na CodePen.

Tejto technike sa v tomto príspevku venujeme oveľa podrobnejšie. Vyzerá to, že IE 11 a nižšie neradi animujú vlastnosti ťahu pomocou @keyframes, takže tam buďte opatrní.

Súvisiace

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

Viac informácií

  • SVG 1.1 Spec
  • MDN na výplniach a ťahoch

Podpora prehľadávača

Chrome Safari Firefox Opera IE Android iOS
Áno Áno Áno Áno 9+ 4,4+ Áno