SVG-Polylinie
Beschreibung des <polyline>-Elements
Das SVG <polyline>-Element erstellt beliebige Formen, die nur aus geraden Linien bestehen, die mehrere Punkte verbinden. Im Gegensatz zum <polygon>-Element erstellt das <polyline>-Element offene Formen.
Beispiel für das SVG <polyline>-Element:
Beispiel für das SVG <polyline>-Element
html
<!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>Um die Form zu definieren, listen Sie die Koordinatenpaare im Attribut points auf. Trennen Sie die x- und y-Werte jedes Paares mit einem Komma und jedes Paar mit einem Leerzeichen. Beispiel: points="30,30 50,35 70,50".
Beispiel für das SVG <polyline>-Element mit geraden Linien:
Beispiel für das SVG <polyline>-Element mit geraden Linien
html
<!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>Attribute
| Attribut | Beschreibung |
|---|---|
| points | Dieses Attribut gibt die Liste der Punkte (Paare aus absoluten x,y-Koordinaten) an, die zum Zeichnen der Polylinie erforderlich sind. |
| pathLength | Dieses Attribut gibt die Gesamtlänge des Pfads in Benutzereinheiten an. |
| stroke-linejoin | Gibt die Art der Ecke an, die erstellt wird, wenn sich zwei Linien treffen. |
| stroke-linecap | Gibt die Form der Linienenden an. |
Das SVG <polyline>-Element unterstützt auch die Globalen Attribute und Ereignisattribute.
Practice
Welche Attribute können mit dem SVG <polyline>-Element in HTML verwendet werden?