Zdvih-dashoffset - Triky CSS

Anonim

stroke-dashoffsetVlastnost CSS definuje umístění podél SVG cestu, kde pomlčka z a strokezačne. Čím vyšší číslo, tím dál po cestě začnou pomlčky.

.module ( stroke-dashoffset: 100; )

Pamatovat si:

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

Hodnoty

stroke-dashoffsetNemovitost může přijmout určité procento nebo číselnou hodnotu.

  • stroke-dashoffset: 100
  • stroke-dashoffset: 25%

Upozorňujeme, že jednotky (tj. emA px) nejsou povinné. Číslo bez jednotek je vykresleno v pixelových jednotkách. Procento je relativní k procentu aktuálního výřezu.

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

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

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ý animuje stroke-dashoffsetprvek ve spojení s stroke-dasharrayvlastností.

.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.

Příbuzný

  • stroke
  • stroke-dasharray
  • 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