Mit der SVG-Zeichnung können mehrere Formen erstellt werden. Eine SVG-Zeichnung kann sieben Formen verwenden und kombinieren: Pfad, Rechteck, Kreis, Ellipse, Linie, Polylinie und Polygon.
Pfad
Das pathElement wird am häufigsten gesehen und normalerweise von Programmen generiert, die zum Exportieren von SVG-Code entwickelt wurden.
Im pathobigen Beispiel wird bei Verwendung in einer SVG-Zeichnung eine Plus-Symbole (+) generiert. SVG- pathElemente werden nicht manuell erstellt, sondern über Entwurfsprogramme generiert, mit denen Vektorgrafiken wie Illustrator oder Inkscape bearbeitet werden können.
Rechteck
Das Rechteckelement rectzeichnet ein Rechteck auf dem Bildschirm und akzeptiert sechs Attribute.
xund yweisen Sie die Position der oberen linken Ecke des Rechtecks widthund heightdie Größe des Rechtecks zu. rxund ryweisen Sie den Radius der Rechteckecken zu, ähnlich der Eigenschaft CSS-Rahmenradius.
Kreis
Das Kreiselement circleakzeptiert drei Attribute.
cxund cyweisen Sie die Position des Mittelpunkts des Kreises zu und rweisen Sie den Radius (die Größe) des Kreises zu.
Ellipse
Das Ellipsenelement ellipseähnelt dem circleElement, außer dass der Radius in zwei Attribute aufgeteilt ist.
Wiederum , cxund cydie Position des Zentrums der Ellipse zuweisen, und jetzt rxund ryden horizontalen und vertikalen Radius der Ellipse zuzuordnen ist. Eine größere rxergibt eine "fette" Ellipse, und eine größere ryergibt eine dünnere Ellipse. Wenn rxund rygleich sind, bildet es einen Kreis.
Linie
Das lineElement ist einfach und akzeptiert vier Attribute.
Die Attribute x1und y1weisen den ersten Punkt der Linie zu, und die Attribute x2und y2weisen den zweiten Punkt der Linie zu.
Polylinie
A polylineist eine Reihe verbundener gerader Linien, die in einem einzigen Attribut zugeordnet sind.
Das pointsAttribut weist eine Liste von Punkten zu, wobei jeder Punkt durch ein Komma getrennt ist.
Polygon
Das polygonElement besteht ebenfalls aus einer Reihe verbundener gerader Linien. In diesem Fall wird die letzte Linie automatisch wieder mit dem Anfangspunkt verbunden.
In diesem Beispiel wird dieselbe Form wie polylineoben gezeichnet, es wird jedoch eine zusätzliche Linie gezeichnet, um die Linienreihe zu schließen.
Mehr Informationen
MDN-Dokumentation: MDN