Einfache und zusammengesetzte Linien

Mit dem <line>-Element können Sie gerade Linien ziehen. Dafür müssen Sie einen Start- und Endpunkt definieren.

x1

X-Koordinate des Startpunkts

y1

Y-Koordinate des Startpunkts

x2

x-Koordinate des Endpunkts

y2

Y-Koordinate des Endpunkts

 
<line x1="5" y1="5" x2="150" y2="150" stroke="#00b7a9" stroke-width="10" />
<line x1="150" y1="5" x2="5" y2="150" stroke="#38474a" stroke-width="10" />
../../../_images/line.png

Mit dem <polyline>-Element können Sie Linienzüge entlang mehrerer Koordinatenpunkte erstellen. Die x- und y-Koordinaten werden im Attribut points angegeben und durch Kommas getrennt.

Beispiel

<polyline fill="none" stroke="#00B7A9"
          stroke-width="4" stroke-miterlimit="10"
          points="50,15.313 22.25,43.063 22.25,84.688 39.594,84.688
                  39.594,60.406 60.406,60.406 60.406,84.688
                  77.75,84.688 77.75,43.063" />
../../../_images/polyline.png