Slagbredd - CSS-tricks

Anonim

Den stroke-widthegendom i CSS är för inställning av bredden av en gräns på SVG former.

.module ( stroke-width: 2; )

Kom ihåg:

  • Detta kommer att åsidosätta en presentation attribut
  • Detta kommer inte att åsidosätta en inline stil, t.ex.

Värden

Den stroke-widthegenskapen kan ta emot obegränsat antal, inklusive hela tal, decimaler och procenttal:

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

Observera att en enhetsidentifierare (dvs. pxoch em) inte krävs. Ett tal utan enheter är ett värde baserat på SVG: s koordinatsystem viewBox. Så, till exempel, 5gör samma som 5%i en viewBoxsom är inställd på 0 0 100 100(5/100 = .05 eller 5%) men 10%i en som är 0 0 50 50(5/50 = .1 eller 10%).

Se egenskapen Pen stroke-width av CSS-Tricks (@ css-tricks) på CodePen.

Relaterad

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

Mer information

  • SVG 1.1 Spec
  • MDN på fyllningar och stroke

Webbläsarstöd

Krom Safari Firefox Opera IE Android iOS
Ja Ja Ja Ja 9+ 4.4+ Ja