stroke-width

Die CSS-Eigenschaft stroke-width dient zum Festlegen der Breite eines Rahmens für SVG-Formen.

.module {
  stroke-width: 2;
}

Denken Sie daran

• Dies wird ein Präsentationsattribut überschreiben <path stroke-width="2" ... />
• Dies wird nicht einen Inline-Stil überschreiben, z. B. <path style="stroke-width: 2;" ... />

Werte

Die Eigenschaft stroke-width kann jede Zahl akzeptieren, einschließlich ganzer Zahlen, Dezimalzahlen und Prozentsätze

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

Beachten Sie, dass kein Einheitenbezeichner (d. h. px und em) erforderlich ist. Eine Zahl ohne Einheiten ist ein Wert, der auf dem Koordinatensystem der SVG-viewBox basiert. So rendert beispielsweise 5 das Gleiche wie 5% in einer viewBox, die auf 0 0 100 100 gesetzt ist (5/100 = 0,05 oder 5 %), aber 10% in einer, die auf 0 0 50 50 gesetzt ist (5/50 = 0,1 oder 10 %).

Siehe den Pen stroke-width property von CSS-Tricks (@css-tricks) auf CodePen.

Verwandt

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

Weitere Informationen

• SVG 1.1 Spezifikation
• MDN zu Füllungen und Strichen

Browser-Unterstützung

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