SVG Stroking
Lerne die SVG-Stroke-Eigenschaften mit ausführbaren Beispielen: stroke, stroke-width, stroke-linecap, stroke-linejoin, stroke-dasharray, stroke-dashoffset und mehr.
SVG-Konturen mit Stroke-Eigenschaften gestalten
Der Stroke eines SVG-Elements ist die Farbe, die entlang der Kontur einer Form, einer Linie oder eines Textes aufgetragen wird — im Gegensatz zum Fill, der das Innere ausfüllt. SVG bietet eine Familie von stroke-*-Eigenschaften, die jeden Aspekt dieser Kontur steuern: ihre Farbe, Dicke, Transparenz, wie ihre Enden abgeschlossen werden, wie Ecken verbunden werden und ob sie durchgehend oder gestrichelt ist.
Diese Eigenschaften sind Präsentationsattribute, sodass sie entweder direkt auf einem Element (stroke="purple") oder über CSS (stroke: purple;) gesetzt werden können. Sie werden außerdem vererbt, weshalb es üblich ist, sie einmalig auf einem <g>-Element (Gruppe) zu setzen und die untergeordneten Formen diese Werte übernehmen zu lassen.
Dieses Kapitel behandelt den vollständigen Satz der Stroke-Eigenschaften. Für die Formen, die du mit einem Stroke versehen wirst, siehe SVG Path, SVG Line und SVG Text. Wenn du neu bei SVG bist, beginne mit der SVG-Einführung und halte die SVG-Referenz für eine schnelle Nachschlagemöglichkeit aller Attribute bereit.
Die Stroke-Eigenschaften auf einen Blick:
stroke— die Farbe (oder andere Füllart) der Kontur.stroke-width— die Dicke der Kontur.stroke-opacity— die Transparenz des Strokes, von0bis1.stroke-linecap— die Form, die an den offenen Enden einer Linie gezeichnet wird:butt,roundodersquare.stroke-linejoin— die Form, die dort gezeichnet wird, wo zwei Liniensegmente aufeinandertreffen:miter,roundoderbevel.stroke-miterlimit— wie weit einemiter-Verbindung sich erstrecken darf, bevor sie zu einembevelwechselt.stroke-dasharray— das Muster aus Strichen und Lücken für eine gestrichelte Kontur.stroke-dashoffset— wie weit entlang des Pfades das Strichmuster beginnt.
Die stroke-Eigenschaft
Die stroke-Eigenschaft legt die Farbe der Kontur fest. Sie akzeptiert jeden CSS-Farbwert — einen benannten Farbwert, einen Hex-Code, rgb(), hsl() oder einen Verweis auf einen Farbverlauf oder ein Muster. Standardmäßig haben Formen keinen Stroke (none), sodass nichts gezeichnet wird, bis du einen festlegst.
Im folgenden Beispiel ist fill="none" auf der Gruppe gesetzt, damit nur die Konturen sichtbar sind, und jeder Pfad wird in einer anderen Farbe gestrichen.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="100">
Sorry, your browser doesn't support inline SVG.
<g fill="none">
<path stroke="purple" d="M5 30 l215 0" />
<path stroke="lightgreen" d="M5 60 l215 0" />
<path stroke="pink" d="M5 90 l215 0" />
</g>
</svg>
</body>
</html>Der Text "Sorry, your browser doesn't support inline SVG." ist ein Fallback-Inhalt. Er muss ein direktes Textkind des <svg>-Elements sein, damit ein Browser ohne Inline-SVG-Unterstützung ihn anstelle der Grafik anzeigt. Moderne Browser ignorieren ihn und rendern das SVG.
Die stroke-width-Eigenschaft
Die stroke-width-Eigenschaft legt die Dicke der Kontur fest. Der Stroke wird zentriert auf dem Pfad gezeichnet, sodass die Hälfte seiner Breite auf jeder Seite der geometrischen Linie liegt.
Eine Zahl allein wird in Benutzereinheiten (das SVG-Koordinatensystem) interpretiert — stroke-width="5" und stroke-width="5px" sind in einem einfachen SVG gleichwertig. Du kannst auch explizite CSS-Einheiten (px, em, pt) oder einen Prozentwert verwenden, der gegen die Diagonale des SVG-viewport und nicht gegen dessen Breite oder Höhe aufgelöst wird.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="100">
<g fill="none" stroke="lightgreen">
<path stroke-width="3" d="M5 30 l215 0" />
<path stroke-width="5" d="M5 60 l215 0" />
<path stroke-width="7" d="M5 90 l215 0" />
</g>
</svg>
</body>
</html>Die stroke-opacity-Eigenschaft
Die stroke-opacity-Eigenschaft steuert die Transparenz des Strokes allein, unabhängig von der Deckkraft des Fills. Sie nimmt einen Wert von 0 (vollständig transparent) bis 1 (vollständig undurchsichtig) an; ein Wert wie 0.5 macht den Stroke halbtransparent. Dies ist nützlich, um Konturen zu überlagern oder den Hintergrund durch eine Kontur hindurchscheinen zu lassen, ohne den Fill der Form zu beeinflussen.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="100">
<g fill="none" stroke="purple" stroke-width="8">
<path stroke-opacity="1" d="M5 30 l215 0" />
<path stroke-opacity="0.5" d="M5 60 l215 0" />
<path stroke-opacity="0.2" d="M5 90 l215 0" />
</g>
</svg>
</body>
</html>Die stroke-linecap-Eigenschaft
Die stroke-linecap-Eigenschaft definiert die Form, die an den offenen Enden eines gestrichenen Pfades gezeichnet wird. Sie akzeptiert drei Werte:
butt(der Standard) — der Stroke endet genau am Endpunkt des Pfades mit einer flachen Kante und ohne Verlängerung. Die gezeichnete Länge entspricht der geometrischen Länge des Pfades.round— ein Halbkreis mit dem Radius der halben Stroke-Breite wird an jedem Ende hinzugefügt, sodass die Linie umstroke-width / 2über den Endpunkt hinausgeht und in einer weichen Kurve endet.square— eine flache Kappe wird hinzugefügt, die umstroke-width / 2über den Endpunkt hinausgeht. Es sieht wiebuttaus, ist aber länger; die zusätzliche Länge an jedem Ende ist dieselbe wie beiround, nur mit einer flachen statt einer gebogenen Kante.
Der Unterschied ist bei einem dicken Stroke am deutlichsten sichtbar. Beachte, wie die Linien mit round und square im Folgenden etwas länger erscheinen als die Linie mit butt, obwohl alle drei Pfade dieselben Koordinaten haben.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="100">
<g fill="none" stroke="lightblue" stroke-width="10">
<path stroke-linecap="butt" d="M5 30 l215 0" />
<path stroke-linecap="round" d="M5 60 l215 0" />
<path stroke-linecap="square" d="M5 90 l215 0" />
</g>
</svg>
</body>
</html>Die stroke-linejoin-Eigenschaft
Die stroke-linejoin-Eigenschaft definiert die Form, die dort verwendet wird, wo zwei Liniensegmente eines Pfades aufeinandertreffen — die Ecken. Sie akzeptiert drei gängige Werte:
miter(der Standard) — die Außenkanten der beiden Segmente werden verlängert, bis sie sich in einem spitzen Punkt treffen.round— die Ecke wird mit einem Bogen abgerundet.bevel— die Ecke wird mit einer flachen Kante abgeschnitten.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="120">
<g fill="none" stroke="orange" stroke-width="12">
<path stroke-linejoin="miter" d="M15 90 L40 20 L65 90" />
<path stroke-linejoin="round" d="M105 90 L130 20 L155 90" />
<path stroke-linejoin="bevel" d="M185 90 L210 20 L235 90" />
</g>
</svg>
</body>
</html>Die stroke-miterlimit-Eigenschaft
Wenn stroke-linejoin auf miter gesetzt ist, können sehr spitze Winkel extrem lange, stachelige Spitzen erzeugen. Die stroke-miterlimit-Eigenschaft begrenzt, wie lang ein solcher Punkt werden darf. Sie legt das maximal zulässige Verhältnis der Miter-Länge zur Stroke-Breite fest, wobei die Miter-Länge der Abstand von der inneren Ecke zur äußeren Spitze des Punktes ist. Würde das Verhältnis einer Verbindung den Grenzwert überschreiten, wechselt diese Verbindung automatisch zu bevel.
Der Standardwert ist 4, was bedeutet, dass ein Miter bis zum Vierfachen der Stroke-Breite reichen darf, bevor er abgeschnitten wird (damit bleibt der Punkt bei jedem Eckenwinkel von etwa 29° oder mehr erhalten). Je schärfer die Ecke, desto länger der Miter; je niedriger du den Grenzwert setzt, desto größer ist der Winkel, ab dem Ecken beginnen, zu einem Bevel zu werden. Ein Grenzwert von 1 macht fast jede Ecke, die keine gerade Linie ist, zu einem Bevel; ein großer Grenzwert wie 10 lässt selbst sehr spitze Zacken durch. Der Wert muss mindestens 1 betragen.
Im folgenden Beispiel formen beide Pfade dieselbe spitze Spitze, aber der linke (stroke-miterlimit="1") wird zu einem Bevel gezwungen, während der rechte (stroke-miterlimit="10") seine Spitze behält.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="120">
<g fill="none" stroke="purple" stroke-width="10" stroke-linejoin="miter">
<path stroke-miterlimit="1" d="M20 100 L45 25 L70 100" />
<path stroke-miterlimit="10" d="M120 100 L145 25 L170 100" />
</g>
</svg>
</body>
</html>Die stroke-dasharray-Eigenschaft
Die stroke-dasharray-Eigenschaft wandelt eine durchgehende Kontur in eine gestrichelte um. Ihr Wert ist eine durch Kommas oder Leerzeichen getrennte Liste von Zahlen, die die Längen von Strichen und Lücken beschreiben und abwechselnd entlang des Pfades angewendet werden:
- Ein einzelner Wert wie
stroke-dasharray="10"erzeugt Striche und Lücken gleicher Länge (10,10). - Zwei Werte wie
stroke-dasharray="3,5"bedeuten einen3-Einheiten-Strich gefolgt von einer5-Einheiten-Lücke, wiederholt. - Bei einer geraden Anzahl von Werten wird die Liste so verwendet, wie sie ist, und wiederholt sich.
Wenn du eine ungerade Anzahl von Werten angibst, wiederholt SVG die Liste ein zweites Mal, um sie gerade zu machen, sodass die Strich-/Lücken-Rollen alternieren. Zum Beispiel wird stroke-dasharray="30,15,10,10,10,15" als Muster aus 30-Strich, 15-Lücke, 10-Strich, 10-Lücke, 10-Strich, 15-Lücke gelesen und wiederholt sich dann.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="100">
<g fill="none" stroke="orange" stroke-width="5">
<path stroke-dasharray="3,5" d="M5 30 l215 0" />
<path stroke-dasharray="12,12" d="M5 60 l215 0" />
<path stroke-dasharray="30,15,10,10,10,15" d="M5 90 l215 0" />
</g>
</svg>
</body>
</html>Die stroke-dashoffset-Eigenschaft
Die stroke-dashoffset-Eigenschaft verschiebt, wo das Strichmuster entlang des Pfades beginnt. Ein Wert von 0 (der Standard) startet das Muster am Startpunkt des Pfades; ein positiver Wert verschiebt den Startpunkt vorwärts entlang des Pfades, während ein negativer Wert ihn rückwärts verschiebt. Dies ermöglicht es, „Marching Ants"- oder Linienzeichnungseffekte zu animieren, indem der Offset schrittweise verändert wird.
Im folgenden Beispiel teilen alle drei Linien dasselbe Strichmuster, beginnen es jedoch bei unterschiedlichen Offsets, sodass die Striche relativ zueinander verschoben erscheinen.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="100">
<g fill="none" stroke="lightgreen" stroke-width="5" stroke-dasharray="20,10">
<path stroke-dashoffset="0" d="M5 30 l215 0" />
<path stroke-dashoffset="10" d="M5 60 l215 0" />
<path stroke-dashoffset="20" d="M5 90 l215 0" />
</g>
</svg>
</body>
</html>Animation mit stroke-dashoffset
Da der Offset animiert werden kann, ist stroke-dashoffset die Grundlage für zwei beliebte Effekte:
- Marching Ants — den Offset über eine vollständige Strichperiode animieren, sodass die Striche entlang der Kontur zu kriechen scheinen (wie ein Auswahlrahmen).
- Linienzeichnung —
stroke-dasharrayauf die Gesamtlänge des Pfades setzen, sodass der gesamte Pfad zu einem langen Strich wird, dann den Offset von dieser Länge auf0animieren, sodass die Linie sich selbst zu zeichnen scheint.
Das folgende CSS erzeugt den Marching-Ants-Effekt. Die Animation läuft von einem Offset von 0 auf 30 (die Länge eines 15,15-Strich-plus-Lücken-Zyklus), was die Schleife nahtlos macht:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.ants {
stroke: purple;
stroke-width: 3;
fill: none;
stroke-dasharray: 15, 15;
animation: march 1s linear infinite;
}
@keyframes march {
to {
stroke-dashoffset: 30;
}
}
</style>
</head>
<body>
<svg width="220" height="120">
<rect class="ants" x="10" y="10" width="200" height="100" />
</svg>
</body>
</html>Für das Zeichnen ganzer Formen auf diese Weise, siehe SVG Path und SVG Line; die vollständige Liste der Stroke-Attribute befindet sich in der SVG-Referenz.