Mrtvice-dasharray - Triky CSS

Anonim

stroke-dasharrayNemovitost v CSS je pro vytvoření pomlčky v úderem SVG tvarů. Čím vyšší číslo, tím více prostoru mezi čárkami v tahu.

.module ( stroke-dasharray: 5; )

Pamatovat si:

  • To bude přepsat atribut prezentační
  • To nebude přepsat inline stylu např

Hodnoty

stroke-dasharrayNemovitost může přijmout jakékoliv délky, včetně unitless hodnotách:

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

Nejjednodušší volbou jsou pravděpodobně hodnoty bez jednotek, jako je tomu obvykle u hodnot SVG. Stávají se délkovými jednotkami, které jsou relativní k souřadnicovému systému nastavenému pomocí viewBox.

Podívejte se na vlastnost Pen stroke-dasharray od CSS-Tricks (@ css-tricks) na CodePen.

Začínáme s tím stroke-dasharray

Už jste někdy viděli ty skvělé ukázky, kde se zdá, že se tvar SVG kreslí sám? To je trik, který přebírá stroke-dasharrayelement a animuje ho ve spojení s stroke-dashoffsetvlastností.

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

Podívejte se na základní příklad pera kreslení čar SVG, zpět a vpřed od Chris Coyier (@chriscoyier) na CodePen.

Této technice se v tomto příspěvku věnujeme mnohem podrobněji. Vypadá to, že IE 11 a nižší nemá rád animaci vlastností tahu pomocí @keyframes, takže buďte opatrní.

Příbuzný

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

Více informací

  • SVG 1.1 Spec
  • MDN na výplních a tahech

Podpora prohlížeče

Chrome Safari Firefox Opera TJ Android iOS
Ano Ano Ano Ano 9+ 4,4+ Ano