SVG Polyline
Auf dieser Seite finden Sie Informationen zum SVG <polyline>-Element, sehen Beispiele zur Verwendung und können selbst eines erstellen.
Das SVG-Element <polyline> zeichnet eine Reihe verbundener geradliniger Abschnitte durch eine Liste von Punkten. Man kann es sich als „Punkte verbinden" mit einem einzigen durchgehenden Strich vorstellen: Sie geben Koordinaten an, und es wird eine Linie von jedem Punkt zum nächsten gezogen. Es eignet sich ideal für Liniendiagramme, Zickzacklinien, Sparklines und beliebige offene mehrsegmentige Umrisse.
Diese Seite erläutert die points-Syntax, die eine Stilregel, die Anfänger am häufigsten falsch machen (fill:none), den Unterschied zwischen <polyline> und dem geschlossenen <polygon> sowie die Steuerung des Aussehens von Ecken und Linienenden. Für die vollständige SVG-Grundformen-Familie siehe die SVG-Referenz.
Beschreibung des <polyline>-Elements
Das SVG-Element <polyline> erstellt eine Form, die ausschließlich aus geraden Linien besteht, die mehrere Punkte verbinden. Anders als das <polygon>-Element — das automatisch ein schließendes Segment zurück zum ersten Punkt zeichnet, um eine geschlossene Form zu bilden — ist eine <polyline> eine offene Form: Der letzte Punkt wird nicht mit dem ersten verbunden. Wenn Sie einen geschlossenen Umriss benötigen (ein Dreieck, Sechseck, Stern), verwenden Sie <polygon>. Für freie Formen mit Kurven verwenden Sie <path>.
Die wichtigste Regel: fill:none setzen
Standardmäßig wird jede SVG-Form mit Schwarz gefüllt (fill:black). Bei einer geschlossenen Form macht das Sinn, aber eine <polyline> ist offen — und SVG füllt sie trotzdem, indem es eine imaginäre Abschlusskante zeichnet und den eingeschlossenen Bereich mit Schwarz flutet. Dies ist der häufigste Anfängerfehler: Man erwartet eine dünne Linie und erhält stattdessen einen schwarzen Fleck.
Die Lösung besteht darin, die Füllung mit fill:none explizit zu deaktivieren und auf stroke zu setzen, um die Linie sichtbar zu machen:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="200">
<!-- WRONG: no fill set, so SVG floods the open shape with black -->
<polyline points="20,20 60,80 100,20 140,80 180,20"
style="stroke:purple;stroke-width:4" />
<!-- RIGHT: fill:none leaves a clean line -->
<polyline points="220,20 260,80 300,20 340,80 380,20"
style="fill:none;stroke:purple;stroke-width:4" />
</svg>
</body>
</html>Fast jede <polyline>, die Sie schreiben, sollte fill:none enthalten.
Beispiel des SVG-Elements <polyline>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="220" >
<polyline points="30,30 50,35 70,50 90,130 130,150 210,190" style="fill:none;stroke:purple;stroke-width:5" />
Sorry, inline SVG isn't supported by your browser.
</svg>
</body>
</html>Die points-Syntax
Das Attribut points ist eine flache Liste absoluter Koordinatenpaare, geschrieben als x,y. Die Punkte werden in der angegebenen Reihenfolge gezeichnet, und jedes x,y wird von der oberen linken Ecke des SVG-Koordinatensystems aus gemessen (x wächst nach rechts, y wächst nach unten).
SVG ist bei den Trennzeichen zwischen Zahlen tolerant — Kommas und Leerzeichen sind austauschbar. Alle folgenden Angaben definieren dieselben drei Punkte:
points="30,30 50,35 70,50"
points="30 30 50 35 70 50"
points="30,30, 50,35, 70,50"Eine verbreitete, lesbare Konvention ist, ein Komma innerhalb jedes Paares und ein Leerzeichen zwischen den Paaren zu setzen, wie in points="30,30 50,35 70,50". Es wird eine gerade Anzahl von Koordinaten benötigt; eine ungerade Anzahl ist ein Fehler.
Beispiel des SVG-Elements <polyline> mit geraden Linien:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="200" >
<polyline points="10,50 50,50 50,90 90,90 90,130 130,130 130,170" style="fill:white;stroke:blue;stroke-width:5" />
Sorry, inline SVG is not supported by your browser.
</svg>
</body>
</html>Hier sieht die Treppe gut aus, weil fill:white zufällig mit dem Seitenhintergrund übereinstimmt — aber das ist eine Falle. Auf einem farbigen oder gemusterten Hintergrund würde die weiße Füllung der offenen Form durchscheinen. Die Verwendung von fill:none ist die robuste Wahl.
Beispiel mit stroke-linecap und stroke-linejoin:
Zwei Darstellungseigenschaften steuern das Aussehen einer gestrichenen Polylinie: stroke-linecap formt die beiden offenen Enden der Linie (butt, round oder square), und stroke-linejoin formt die Ecken, an denen Segmente aufeinandertreffen (miter, round oder bevel). Sie sind bei dicken Strichen am deutlichsten sichtbar:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="200">
<!-- Sharp default: square ends, mitered corners -->
<polyline points="20,40 80,140 140,40"
style="fill:none;stroke:teal;stroke-width:16;
stroke-linecap:butt;stroke-linejoin:miter" />
<!-- Soft: rounded ends and rounded corners -->
<polyline points="200,40 260,140 320,40"
style="fill:none;stroke:tomato;stroke-width:16;
stroke-linecap:round;stroke-linejoin:round" />
</svg>
</body>
</html>Vergleichen Sie die spitze Ecke der linken (blaugrünen) Linie mit der weichen Ecke der rechten (tomatenroten). Um diese und weitere Strich-Optionen im Detail zu erkunden, siehe SVG Stroking.
Attribute spezifisch für <polyline>
Nur zwei Attribute gehören wirklich zum <polyline>-Element selbst — der Rest, was Sie darauf setzen (fill, stroke, stroke-width usw.), sind Darstellungseigenschaften, die vom allgemeinen SVG-Darstellungsmodell geerbt werden und separat unten behandelt werden.
| Attribut | Beschreibung |
|---|---|
| points | Die Liste der Punkte (Paare von absoluten x,y-Koordinaten), die die Polylinie definieren. Dies ist das einzige erforderliche Attribut. |
| pathLength | Die Gesamtlänge der Linie in Benutzereinheiten, die zur Kalibrierung von Stricheffekten (z. B. Striche) verwendet wird. |
Darstellungseigenschaften (geerbt, nicht polyline-spezifisch)
fill, stroke, stroke-linecap und stroke-linejoin sind nicht einzigartig für <polyline> — es sind CSS-Darstellungseigenschaften, die für die meisten SVG-Grafikelemente gelten und entweder als XML-Attribute (stroke="purple") oder per CSS (style="stroke:purple") gesetzt werden können. Sie werden wie jedes andere CSS vererbt und überschrieben, weshalb sie hier und nicht als Element-Attribute aufgeführt werden.
| Eigenschaft | Beschreibung |
|---|---|
| fill | Die Farbe, mit der das (automatisch geschlossene) Innere geflutet wird. Setzen Sie fill:none für eine offene Linie. |
| stroke | Die Farbe der Linie selbst. |
| stroke-width | Die Stärke der Linie. |
| stroke-linejoin | Die Art der Ecke, die entsteht, wo zwei Segmente aufeinandertreffen: miter, round oder bevel. |
| stroke-linecap | Die Form der offenen Linienenden: butt, round oder square. |
Das SVG-Element <polyline> unterstützt auch die Globalen Attribute und Ereignis-Attribute.