Kap-dasharray - CSS-triki

Anonim

stroke-dasharrayHotel v CSS je za ustvarjanje črtice v kapi SVG oblik. Večje kot je število, več prostora med pomišljaji v potezi.

.module ( stroke-dasharray: 5; )

Ne pozabite:

  • To bo preglasilo atribut predstavitve
  • To ne bo preglasilo vrstnega sloga, npr

Vrednote

stroke-dasharrayPremoženje lahko sprejme kakršne koli dolžine, vključno Brez enot vrednosti:

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

Vrednosti brez enot so verjetno najpogostejša izbira, kot je to običajno pri vrednostih SVG. Postanejo dolžinske enote, ki so glede na koordinatni sistem, ki ga je vzpostavil viewBox.

Oglejte si lastnost Pen stroke-dasharray s strani CSS-Tricks (@ css-tricks) na CodePen.

Pridobivanje zapletenega stroke-dasharray

Ste že kdaj videli tiste kul predstavitve, kjer se zdi, da se oblika SVG nariše? To je trik, ki zavzame stroke-dasharrayelement in ga animira v povezavi z stroke-dashoffsetlastnostjo.

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

Oglejte si osnovni primer pisala s črtami SVG, nazaj in naprej, ki ga je napisal Chris Coyier (@chriscoyier) na CodePen.

To tehniko v tej objavi obravnavamo veliko podrobneje. Zdi se, da IE 11 in navzdol ne mara animacije lastnosti poteze z @keyframes, zato bodite previdni tam.

Sorodno

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

Več informacij

  • SVG 1.1 Spec
  • MDN na zapolnitvah in potezah

Podpora za brskalnik

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