SVG <polyline> Kurven zeichnen

Das polyline-Element ist ein grundlegendes SVG-Element, das verwendet wird, um eine Reihe von Linien zu verbinden, die mehrere Punkte verbinden. Ein typisches polyline wird verwendet, um eine offene Form zu erstellen, wobei der letzte Punkt nicht mit dem ersten Punkt verbunden ist

Kurvenlinienbeispiel

Beispielcode für eine Kurvenlinie wie folgt:

<svg　width="120"　height="120"　
　　　　　viewPort="0　0　120　120"　version="1.1"
　　　　　xmlns="http://www.w3.org/2000/svg>
　　　　<polyline　fill="none"　stroke="black"　
　　　　　　　　　　　　　　points="20,100　40,60　70,80　100,20"/>
</svg>

Nach dem Ausführen sieht das Ergebnis wie folgt aus:

Zeichnen eines Dreiecks

Beispielcode wie folgt:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<polyline　points="0,0　　30,0　　15,30"
　　　　　　　　style="stroke:#006600;"/>
</svg>

Vorschau des Ergebnisses nach dem Ausführen:

Mehrere Linien werden durch Punkte gekennzeichnet. Jeder Punkt wird im Attribut points mit x, y aufgelistet. Dieses Beispiel hat3Punkte, die ein Dreieck definieren.
Definiert3Punkte mit Linien verbunden und gefüllt. Die Standardfüllfarbe ist schwarz.

Zeichnen eines gefüllten grünen Dreiecks

Beispielcode wie folgt:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<polyline　points="10,2　　60,2　　35,52"
　　　　　　　　style="stroke:#006600;　stroke-width:　2;
　　　　　　　　　　　　　　　fill:　#33cc33;"/>
</svg>

Vorschau des Ergebnisses nach dem Ausführen:

Sie haben vielleicht bemerkt, dass nur zwei Linien im Dreieck mit der Strichfarbe (Dunkelgrün) gezeichnet sind. Der Grund dafür ist, dass nur die Linien zwischen den aufgelisteten Punkten gezeichnet werden. Es wird keine Linie zurück zum ersten Punkt gezeichnet. Daher wird der erste Punkt durch points erneut in das Attribut eingefügt, wie folgt:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<polyline　points="10,2　　60,2　　35,52　　10,2"
　　　　　　　　style="stroke:#006600;　fill:　#33cc33;"/>
</svg>

Die style-Eigenschaft legt die Farbe und die Dicke des Strichs (Linien) sowie die Füllfarbe fest.