CSS stroke-width-Eigenschaft
Die CSS stroke-width-Eigenschaft gibt die Breite des Strichs am Element an.
CSS stroke-width überschreibt das SVG-Präsentationsattribut. Eine CSS-Regel hat beispielsweise Vorrang vor stroke-width="3" im Markup. Inline-Stile überschreiben ebenfalls Präsentationsattribute.
INFO
Die stroke-width ist ein Präsentationsattribut und kann auf jedes Element angewendet werden, wirkt sich jedoch nur auf die folgenden Elemente aus: <altGlyph>, <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref> und <tspan>.
INFO
Einheiten wie px oder em sind erforderlich, außer wenn der Wert 0 ist.
| Anfangswert | 1 |
|---|---|
| Anwendbar auf | Formen und Textinhaltselemente. |
| Vererbt | Ja. |
| Animierbar | Ja. |
| Version | SVG 1.1-Spezifikation |
| DOM-Syntax | Object.strokeWidth = "0.5"; |
Syntax
CSS stroke-width-Syntax
stroke-width: length | percentage | initial | inherit;Beispiel für die stroke-width-Eigenschaft:
CSS stroke-width-Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Stroke-width property example</h2>
<svg viewBox="0 0 30 10">
<circle cx="5" cy="5" r="3" stroke="#1c87c9" style="stroke-width: 1px;" />
</svg>
</body>
</html>Ergebnis
Beispiel für die stroke-width-Eigenschaft mit dem Wert „length“:
CSS stroke-width weiteres Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Stroke-width property example</h2>
<svg viewBox="0 0 30 10">
<circle cx="5" cy="5" r="3" stroke="#1c87c9" style="stroke-width: 3px;" />
</svg>
</body>
</html>Beispiel für die stroke-width-Eigenschaft mit dem Wert „%“:
CSS stroke-width-Beispiel für Prozentwert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Stroke-width property example</h2>
<svg viewBox="0 0 30 10">
<circle cx="5" cy="5" r="3" stroke="#1c87c9" style="stroke-width: 2%;" />
</svg>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| length | Gibt die Breite des Strichs an. |
| percentage | Gibt die Breite des Strichs in % an. |
| initial | Legt die Standardeigenschaft fest. |
| inherit | Erbt die Eigenschaft vom Elternelement. |
Praxis
Was macht die CSS-Eigenschaft 'stroke-width'?