CSS stroke-Eigenschaft
Wie man die CSS-Eigenschaft stroke verwendet, um den Umriss eines Elements zu zeichnen. Lesen Sie mehr über die Eigenschaft und sehen Sie die Werte mit Beispielen.
Die CSS-Eigenschaft stroke zeichnet den Umriss (die Linie) einer SVG-Form oder eines Textstücks. Während fill das Innere einer Form einfärbt, färbt stroke deren Rand — zusammen steuern sie, wie jedes SVG-Pfad-, Kreis-, Rechteck- und Textelement gezeichnet wird.
Diese Seite erklärt, was stroke bewirkt, welche Werte es akzeptiert, wie es mit verwandten stroke-Eigenschaften (Breite, Strichmuster, Linienenden) zusammenwirkt und welche häufigen Fallstricke es gibt.
Wann würde ich es verwenden?
stroke wirkt nur auf SVG-Inhalte — bei gewöhnlichen HTML-Elementen wie <div> oder <p> hat es keine Wirkung. Verwenden Sie es, wenn Sie:
- Icons, Diagramme oder Grafiken inline mit
<svg>zeichnen. - Eine Linie animieren, die sich "selbst zeichnet" (kombinieren Sie
strokemitstroke-dasharrayundstroke-dashoffset). - SVG-Text umranden, ohne ihn zu füllen.
Benannte Webfarben finden Sie im Abschnitt HTML-Farben.
CSS-Eigenschaft vs. Präsentationsattribut
stroke ist besonders: Sie können es entweder als CSS-Eigenschaft oder als SVG-Präsentationsattribut direkt am Element setzen. Diese beiden Zeilen erzeugen dasselbe Ergebnis:
<!-- presentation attribute -->
<path stroke="#1c87c9" d="M5 20 l215 0" />
<!-- CSS, via a style block or stylesheet -->
<path style="stroke: #1c87c9;" d="M5 20 l215 0" />Wenn beide vorhanden sind, gewinnt CSS: Ein Inline-style (oder jede Stylesheet-Regel) überschreibt das Präsentationsattribut. So können Sie eine Standardfarbe im Markup festlegen und sie aus CSS überschreiben — zum Beispiel beim Hover.
Die Eigenschaft stroke kann sowohl als CSS-Eigenschaft als auch als Präsentationsattribut verwendet werden. Sie kann auf jedes Element angewendet werden, hat aber nur auf die folgenden Elemente eine Wirkung: <altGlyph>, <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref> und <tspan>.
| Ausgangswert | none |
|---|---|
| Gilt für | Formen und Textelemente. |
| Vererbbar | Ja. |
| Animierbar | Nein. |
| Version | SVG 1.1 Specification |
| DOM-Syntax | Object.stroke = "#1c87c9"; |
Syntax
CSS stroke-Syntax
stroke: color | url | none | context-fill | context-stroke | initial | inherit;Beispiel der stroke-Eigenschaft:
CSS stroke-Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Stroke property example</h2>
<svg height="100" width="500">
<g fill="none">
<path stroke="#8ebf42" d="M5 20 l215 0" />
<path stroke="#1c87c9" d="M5 40 l215 0" />
<path stroke="#666666" d="M5 60 l215 0" />
</g>
</svg>
</body>
</html>Ergebnis
Beispiel mit Formen und CSS
Sie müssen stroke nicht als Attribut schreiben — hier wird es über einen <style>-Block gesetzt und auf mehrere Formen gleichzeitig angewendet. Beachten Sie fill: none, damit nur der Umriss sichtbar ist:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.outline {
fill: none;
stroke: #1c87c9;
stroke-width: 4px;
}
circle.outline {
stroke: #8ebf42;
}
</style>
</head>
<body>
<h2>Stroke from a CSS rule</h2>
<svg height="120" width="300">
<rect class="outline" x="10" y="10" width="100" height="100" />
<circle class="outline" cx="220" cy="60" r="50" />
</svg>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| none | Es wird keine Farbe aufgetragen. |
| color | Setzt eine Volltonfarbe. Farbnamen, hexadezimale Farbcodes, rgb(), rgba(), hsl(), hsla() können verwendet werden. |
| url | Ein URL-Verweis auf ein Paint-Server-Element, das einen Paint-Server definiert. |
| context-fill | Verwendet den Wert von fill aus einem Kontextelement. |
| context-stroke | Verwendet den Wert von stroke aus einem Kontextelement. |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Der Ausgangswert ist none, was bedeutet, dass eine Form ohne stroke ohne Umriss gezeichnet wird — selbst wenn stroke-width gesetzt ist.
Verwandte stroke-Eigenschaften
stroke setzt nur die Farbe des Umrisses. Um das Aussehen des Umrisses zu steuern, kombinieren Sie es mit:
stroke-width— wie dick die Linie ist.stroke-dasharray— ein Strich-/Lückenmuster statt einer durchgehenden Linie.stroke-dashoffset— wo das Strichmuster beginnt (der Schlüssel zu Linienzeichnungs-Animationen).stroke-linecap— die Form der Linienendkappen.
Häufige Fallstricke
- Es wird nichts angezeigt. Wenn
stroke-width0ist (der Standardwert), ist der Umriss unsichtbar, egal welche Farbe Sie wählen. Setzen Sie immer eine Breite. - Die Form ist ausgefüllt. Wenn Sie nur den Umriss möchten, setzen Sie
fill: none— andernfalls wird das Innere standardmäßig schwarz gefüllt. - Es funktioniert nicht bei einem
<div>.strokewirkt nur auf SVG-Grafiken und Textelemente:<altGlyph>,<circle>,<ellipse>,<line>,<path>,<polygon>,<polyline>,<rect>,<text>,<textPath>,<tref>und<tspan>.