Stroke - CSS-tricks

Anonim

Den strokeegendom i CSS är för att lägga en gräns till SVG former.

.module ( stroke: black; )

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 strokeegenskapen kan acceptera någon CSS färgvärde.

  • Namngivna färger - orange
  • Hexfärger - #FF9E2C
  • RGB- och RGBa-färger - rgb(255, 158, 44) and rgba(255, 158, 44, .5)
  • HSL- och HSLa-färger - hsl(32, 100%, 59%) and hsla(32, 100%, 59%, .5)

Fantastiskt nog, strokeaccepterar också mönster för SVG-former som definieras inuti ett defselement:

.module ( stroke: url(#pattern); )

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

Relaterad

  • fill
  • stroke-dasharray
  • stroke-dashoffset
  • stroke-linecap
  • stroke-width

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