Šírka zdvihu - Triky CSS

Anonim

stroke-widthNehnuteľnosť v CSS slúži na nastavenie šírky hranice na SVG tvarov.

.module ( stroke-width: 2; )

Pamätajte:

  • To bude prepísať atribút prezentačné
  • To nebude prepísať inline štýle napr

Hodnoty

Toto stroke-widthubytovacie zariadenie akceptuje akékoľvek číslo vrátane celých čísel, desatinných miest a percentuálnych údajov:

  • 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) sa nevyžaduje. Číslo bez jednotiek je hodnota založená na súradnicovom systéme SVG viewBox. Napríklad, 5vykreslenie je rovnaké ako 5%v a, viewBoxktoré je nastavené na 0 0 100 100(5/100 = 0,05 alebo 5%), ale 10%v jednom, ktoré je 0 0 50 50(5/50 = 0,1 alebo 10%).

Prezrite si vlastnosť šírky ťahu pera pomocou CSS-Tricks (@ css-tricks) na CodePen.

Súvisiace

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

Viac informácií

  • SVG 1.1 Spec
  • MDN na výplniach a ťahoch

Podpora prehľadávača

Chrome Safari Firefox Opera IE Android iOS
Áno Áno Áno Áno 9+ 4,4+ Áno