Šířka tahu - Triky CSS

Anonim

stroke-widthNemovitost v CSS slouží k nastavení šířky hranice na SVG tvarů.

.module ( stroke-width: 2; )

Pamatovat si:

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

Hodnoty

stroke-widthNemovitost může přijímat libovolný počet, včetně celých čísel, desetinná místa, a procenta:

  • stroke-width: 2px
  • stroke-width: 2em
  • stroke-width: 2
  • stroke-width: 2.5
  • stroke-width: 15%

Upozorňujeme, že identifikátor jednotky (tj. pxA em) není vyžadován. Číslo bez jednotek je hodnota založená na souřadnicovém systému SVG viewBox. Například 5vykreslení je stejné jako 5%v a, viewBoxkteré je nastaveno na 0 0 100 100(5/100 = 0,05 nebo 5%), ale 10%v jednom, které je 0 0 50 50(5/50 = 0,1 nebo 10%).

Podívejte se na vlastnost šířky tahu pera pomocí CSS-Tricks (@ css-tricks) na CodePen.

Příbuzný

  • stroke
  • stroke-dasharray
  • stroke-dashoffset
  • stroke-linecap

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