Moždani udar-dasharray - CSS-trikovi

Anonim

stroke-dasharrayNekretnina u CSS je za stvaranje crtice u potezom SVG oblika. Što je broj veći, to je više razmaka između crtica u potezu.

.module ( stroke-dasharray: 5; )

Zapamtiti:

  • Ovo će poništiti atribut prezentacije
  • To neće nadjačati ugrađeni stil, npr

Vrijednosti

stroke-dasharrayImovine može prihvatiti bilo koju duljinu, uključujući Bez jedinica vrijednosti:

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

Vrijednosti bez jedinice vjerojatno su najčešći izbor, kao što je to općenito kod SVG vrijednosti. Oni postaju jedinice duljine koje su u odnosu na koordinatni sustav koji je postavio viewBox.

Pogledajte svojstvo Pen stroke-dasharray od CSS-Tricks (@ css-tricks) na CodePen-u.

Dobivanje lukav s stroke-dasharray

Jeste li ikada vidjeli one cool demonstracije u kojima se čini da se SVG oblik crta sam? To je trik koji uzima stroke-dasharrayelement i animira ga zajedno sa stroke-dashoffsetsvojstvom.

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

Pogledajte osnovni primjer olovke za crtanje SVG linija, unatrag i naprijed, autora Chris Coyier (@chriscoyier) na CodePenu.

Ovu tehniku ​​pokrivamo puno detaljnije u ovom postu. Izgleda da IE 11 i dolje ne vole animirati svojstva poteza s @keyframes, pa budite oprezni tamo.

Povezano

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

Više informacija

  • SVG 1.1 Spec
  • MDN na ispunama i potezima

Podrška preglednika

Krom Safari Firefox Opera IE Android iOS
Da Da Da Da 9+ 4,4+ Da