SVG <svg>-Element

SVG-Bilder werden mit verschiedenen Elementen erstellt, die entsprechend der Struktur, Zeichnung und Anordnung des Vektorbildes angewendet werden. Wenn svg nicht das Wurzelelement ist, kann das svg-Element verwendet werden, um ein unabhängiges SVG-Stück im aktuellen Dokument (z.B. einem HTML-Dokument) zu verschachteln. Dieses unabhängige Stück hat eine eigene Ansicht und ein eigenes Koordinatensystem.

Regeln für das svg-Element

Der Wurzelelement aller SVG-Bilder ist das <svg>-Element. Regeln für das svg-Element:

<svg xmlns="http://www.w3.org/2000/svg"　
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">　
</svg>

Vergessen Sie nicht, die beiden Namensräume zu verwenden, sonst wird Firefox die SVG-Datei nicht als Bild darstellen, sondern sie als andere XML-Datei interpretieren.

Verschachtelte SVG-Elemente

SVG-Elemente können miteinander verschachtelt werden, wie gezeigt:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<svg>
　　　　</svg>
</svg>

Verschachtelte SVG-Elemente können verwendet werden, um SVG-Formen zusammenzufassen und sie als Sammlung zu platzieren. Alle Formen, die innerhalb eines SVG-Elements verschachtelt sind, werden relativ zur Position (x, y) ihres umschließenden SVG-Elements positioniert (x, y). Durch Verschieben der x- und y-Koordinaten des umschließenden SVG-Elements können Sie auch alle verschachtelten Formen verschieben.
Dies ist ein Beispiel, bei dem zwei Rechtecke in zwei SVG-Elementen verschachtelt sind. Abgesehen vom Farbe sind die x, y, Höhe und Breite der beiden Rechtecke identisch. Die umschließenden SVG-Elemente haben unterschiedliche x-Werte. Da die x-Position der Rechtecke relativ zur x-Position ihres umschließenden SVG-Elements interpretiert wird, werden die beiden Rechtecke an verschiedenen x-Positionen angezeigt.

Online-Beispiel

<svg xmlns="http://www.w3.org/2000/svg"
　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<svg　x="10">
　　　　<rect　x="10"　y="10"　height="100"　width="100"
　　　　　　　　style="stroke:#ff0000;　fill:　#0000ff"/>
　　</svg>
　　<svg　x="200">
　　　　<rect　x="10"　y="10"　height="100"　width="100"
　　　　　　　　style="stroke:#009900;　fill:　#00cc00"/>
　　</svg>
</svg>

Beachten Sie, dass das Namensraum-Attribut nur im Wurzelelement erforderlich ist. svg Wenn keine Namensräume festgelegt sind, wird angenommen, dass alle eingebetteten Elemente im Standardnamensraum (im Wurzelelement festgelegt) enthalten sind.
Dies ist das SVG-Bild, das durch das Ausführen des obigen Codes generiert wurde: