HTML5 SVG 2d Einführung 7 - Wiederverwendung und Referenz von SVG -Elementen

Autor：Eve Cole Aktualisierungszeit：2025-04-12 02:48:01

Ich habe schon viele grafische Elemente eingeführt. Wenn viele grafische Elemente gleich sind, muss ich jedes Mal eine neue definieren? Können wir einige Grafiken teilen? Dies ist der Schwerpunkt dieses Abschnitts - die Wiederverwendung von SVG -Elementen.

Kombination -g -Elemente

Das G -Element ist ein Container, der eine Gruppe verwandter grafischer Elemente in ein Ganzes kombiniert. Auf diese Weise können wir das Ganze operieren. Dieses Element kann normalerweise in Verbindung mit den Desc- und Titelelementen verwendet werden, um die Strukturinformationen des Dokuments bereitzustellen. Gut strukturierte Dokumente sind normalerweise gut lesbar und gerendert. Siehe ein kleines Beispiel:

<svgxmlns = "http://www.w3.org/2000/svg"

Version = "1.1" width = "5cm" height = "5cm">

<desc> Twogruppe, EveroftWorectangles </Desc>

</g>

</g>

<!-Showoutline der Werbung für die Leinwandung->

<rectx = ". 01cm" y = ". 01cm" width = "4,98cm" height = "4,98cm"

fill = "keine" stroke = "blau" stroke-width = ". 02cm"/>

</svg>

Ein paar Punkte zu beachten :

1.xmlns = http: //www.w3.org/2000/svg zeigt an, dass der Standard -Namespace des gesamten SVG -Elements SVG ist. Dies kann weggelassen werden, wenn keine Unklarheit besteht. Da es sich bei dem SVG -Dokument um ein XML -Dokument handelt, gelten die entsprechenden Regeln für den XML -Namespace hier. Sie können beispielsweise den angegebenen Namespace in SVG angeben, Alias für den Namespace usw. angeben.

2. Gelemente können verschachtelt werden.

3. Die kombinierten grafischen Elemente entsprechen den einzelnen Elementen, und der ID -Wert kann angegeben werden. Auf diese Weise können Sie bei Bedarf (z. B. Animation und Wiederverwendung einer Gruppe von Elementen) nur auf diesen ID -Wert verweisen.

4. Kombination einer Reihe von grafischen Elementen kann die relevanten Attribute dieser Elemente (Füllung, Schlaganfall, Transformation usw.) festlegen, was auch ein Szenario ist, in dem Kombinationen verwendet werden.

Vorlage - Symbolelement

Das Symbolelement wird verwendet, um eine grafische Vorlage zu definieren (die Vorlage kann viele Grafiken enthalten), die durch das Element verwenden können. Die Funktionen der Vorlage sind dem G -Element sehr ähnlich und liefern eine Reihe von Grafikobjekten, aber es gibt einige Unterschiede. Der Unterschied vom G -Element ist:

1. Das Symbolelement selbst wird nicht gerendert, nur Instanzen der Symbolvorlage werden gerendert.

2. Das Symbolelement kann Attribute ViewBox und PreserveSpectratio haben, mit denen das Symbol grafische Elemente skalieren kann.

Aus Sicht der Rendering sind Elemente ähnliche Elemente, die Symbolelementen (Definieren von Pfeilen und Markierungen) und Muster (Definieren von Farbe) Elementen sind; Diese Elemente werden nicht direkt gerendert; Ihre Verwendung wird im Grunde genommen durch das Verwendungselement instanziiert. Genau aus diesem Grund ist das "Display" -attribut für Symbol bedeutungslos.

Der folgende geänderte Code zeigt, wie Symbol verwendet wird:

<svgxmlns = "http://www.w3.org/2000/svg"

xmlns: xlink = "http://www.w3.org/1999/xlink"

Version = "1.1" width = "5cm" height = "5cm">

<desc> Twogruppe, EveroftWorectangles </Desc>

</symbol>

</g>

<usexLink: href = "#Group1" target = "_ leer" rel = "nofollow">

<!-Showoutline der Werbung für die Leinwandung->

<rectx = ". 02cm" y = ". 02cm" width = "4,96cm" height = "4,96cm"

fill = "keine" stroke = "blau" stroke-width = ". 02cm"/>

</svg>

Definieren Sie -defs Element

Mit SVG können Sie eine Reihe von Objekten definieren und dann wiederverwenden (beachten Sie, dass es sich nicht nur um ein Grafikobjekt handelt). Das häufigste Beispiel ist, eine Gradientenfarbe zu definieren und dann anderen Grafikobjekten Füllattribute zuzuweisen. Die Definition von Gradientenfarben wird nicht gerendert, sodass Objekte dieser Art überall platziert werden können. Die Wiederverwendung findet sich häufig in grafischen Objekten, und wir möchten bei der Definition nicht direkt rendern, sondern in Bezug auf Referenzen rendern. Dies kann mit dem DEFS -Element implementiert werden.

Im Allgemeinen besteht der empfohlene Ansatz darin, das referenzierte Objekt nach Möglichkeit in das DEFS -Element zu legen. Diese Objekte sind normalerweise: Altglyphen, Clippath, Cursor, Filter, Marker, Maske, Muster, Lineargradient, Radialgradient, Symbol und grafische Objekte. Das Definieren dieser Objekte im DEFS -Element ist leicht zu verstehen und verbessert die Zugänglichkeit.

Tatsächlich liefern die G -Elemente, Symbolelemente und DEFS -Elemente als Containerobjekte alle eine Wiederverwendung in unterschiedlichem Maße. Die Eigenschaften jedes Elements können jedoch geringfügig unterschiedlich sein: Zum Beispiel werden die G -Elemente direkt gerendert, Symbol und DEFs werden nicht direkt gerendert, Symbol enthält das Viewbox -Attribut, das ein neues Fenster erzeugt.

Normalerweise werden Elemente, die in DEFS definiert sind, ein ID -Attribut zugewiesen und direkt überall dort verwendet. Abhängig von den Elementen können diese Definitionen an verschiedenen Stellen verwendet werden, z. B. die folgenden progressiven Farben als Attribute:

<svgwidth = "8cm" height = "3cm"

xmlns = "http://www.w3.org/2000/svg" Version = "1.1">

<Desc> localUrireferenceswithinancestor'S'Defs 'Element. </desc>

<defs>

</lineargradient>

</defs>

<rectx = "1cm" y = "1cm" width = "6cm" height = "1cm"

fill = "url (#gradient01)"/>

</svg>

Die Definition der grafisch verwandten Elemente kann mit dem Dokument mit dem Element verwenden. Zum Beispiel:

<svgwidth = "10cm" height = "3cm" viewbox = "0010030" Version = "1.1"

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

<Desc> Beispieluse01-Simpecaseof'use'ona'Rect '</desc>

<defs>

</defs>

<rectx = ". 1" y = ". 1" width = "99.8" height = "29.8"

fill = "keine" stroke = "blau" stroke-width = ". 2"/>

</svg>

Bitte beachten Sie hier die Verwendung des Xlink -Namespace. Obwohl die meisten Zuschauer dieses Element auch ohne ihn korrekt anzeigen, sollte der XLink -Namespace für die <svg> </svg> -Elements definiert werden.

Zitatnutzungselement

Jedes SVG, Symbol, G, ein einzelnes Grafikelement und das Gebrauchselement können im Wesentlichen als Vorlagenobjekte mit dem Verwendung von Element verwendet werden (z. B. initialisiert). Der durch den Gebrauch verwiesene Grafikinhalt wird am angegebenen Ort gerendert. Im Gegensatz zum Bildelement kann das Verwenden von Element nicht das gesamte Dokument verweisen.

Das Anwendungselement verfügt auch über X-, Y-, Breiten- und Höhenattribute. Diese Attribute können weggelassen werden. Wenn nicht weggelassen, werden die referenzierten Grafik -Inhaltskoordinaten oder Länge dem aktuellen Benutzerkoordinatenraum zugeordnet.

Der Aktionsprozess des Verwendungselements entspricht dem tiefgreifenden Kopieren des referenzierten Objekts in einen unabhängigen nicht öffentlichen Dom-Baum. Der übergeordnete Knoten dieses Baumes ist das Verwendungselement. Obwohl es sich um einen nicht öffentlichen DOM-Knoten handelt, handelt es sich im Wesentlichen um einen DOM-Knoten. Daher werden alle Attributwerte, Animationen, Ereignisse und CSS -verwandten Einstellungen des referenzierten Objekts kopiert und funktionieren weiterhin. Darüber hinaus erben diese Knoten auch die relevanten Attribute des Verwendungselements und den Gebrauchsvorfahren (beachten Sie, dass die referenzierten Elemente tiefe Kopien sind und diese kopierten Elemente nichts mit dem ursprünglichen Element zu tun haben, sodass die Attribute des Referenzelement -Ancestor -Knotens hier nicht vererbt werden). Wenn diese Knoten selbst verwandte Attribute (CSS) haben, überschreiben sie auch die ererbten Attribute, die mit gewöhnlichen DOM -Knoten übereinstimmen. Seien Sie also vorsichtig, wenn Sie die Sichtbarkeit verwenden: Versteckt für die Verwendung von Elementen, und es funktioniert nicht unbedingt. Da diese Knoten jedoch in DOM-Operationen nicht öffentlich sind, können Sie nur das Verwendungselement sehen, sodass Sie das Use-Element nur bedienen können.

Aus der Sicht der visuellen Effekte ist das Verwendungselement eher wie ein Platzhalter, und der visuelle Effekt nach dem Rendering entspricht dem direkten Rendern mit dem referenzierten Objekt:

1. Verwenden Sie Element auf ein Symbolelement

In diesem Fall entspricht der visuelle Effekt:

(1) das Verwenden von Element in das G -Element ändern;

(2) Verschieben Sie alle Gebrauchseigenschaften mit Ausnahme von X, Y, Breite, Höhe, XLink: HREF in das G -Element;

(3) Verwandeln Sie die X- und Y -Attribute der Verwendung in Übersetzer (x, y) und geben Sie das letzte Transformationsattribut des G -Elements an;

(4) Ersetzen Sie das referenzierte Symbolelement durch das SVG -Element. Dieses SVG -Element verwendet explizit die Breiten- und Höhenattribute des Use -Elements (das Use -Element hat diese Attribute nicht, was zu 100%ist).

(5) Kopieren Sie den grafischen Inhalt des referenzierten Symbolelements tief in das ersetzte SVG.

2. Das Verwendungselement bezieht sich auf ein SVG -Element

In diesem Fall entspricht der visuelle Effekt:

(1) das Verwenden von Element in das G -Element ändern;

(2) Verschieben Sie alle Gebrauchseigenschaften mit Ausnahme von X, Y, Breite, Höhe, XLink: HREF in das G -Element;

(3) Verwandeln Sie die X- und Y -Attribute der Verwendung in Übersetzer (x, y) und geben Sie das letzte Transformationsattribut des G -Elements an;

(4) Kopieren Sie das referenzierte SVG -Element einschließlich des Inhalts. Dieses SVG -Element verwendet explizit die Breiten- und Höhenattribute des Use -Elements (das Use -Element hat diese Attribute nicht und verwendet den ursprünglichen Wert).

3. Andere Situationen

Der visuelle Effekt in diesen Fällen entspricht:

(1) das Verwenden von Element in das G -Element ändern;

(2) Verschieben Sie alle Gebrauchseigenschaften mit Ausnahme von X, Y, Breite, Höhe, XLink: HREF in das G -Element;

(3) Verwandeln Sie die X- und Y -Attribute der Verwendung in Übersetzer (x, y) und geben Sie das letzte Transformationsattribut des G -Elements an;

(4) die referenzierten Elemente kopieren;

Siehe die visuellen Effekte des folgenden Beispiels :

<svgwidth = "10cm" height = "3cm" viewbox = "0010030" Version = "1.1"

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

<Desc> Beispieluse03-'use'witha'transform'attribute </desc>

<defs>

</defs>

<rectx = ". 1" y = ". 1" width = "99.8" height = "29.8"

fill = "keine" stroke = "blau" stroke-width = ". 2"/>

<UsexLink: href = "#myRect"

Transformation = "Translate (20,2,5) drehen (10)"/>

</svg>

Die folgende Abbildung sieht genauso aus wie die obige Abbildung :

<svgwidth = "10cm" height = "3cm" viewbox = "0010030"

xmlns = "http://www.w3.org/2000/svg" Version = "1.1">

<Desc> Beispieluse03-'use'witha'transform'attribute </desc>

<rectx = ". 1" y = ". 1" width = "99.8" height = "29.8"

fill = "keine" stroke = "blau" stroke-width = ". 2"/>

</g>

</svg>

Praktische Referenz:

Skriptindex: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

Entwicklungszentrum: https://developer.mozilla.org/en/svg

Beliebte Referenz: http://www.chinasvg.com/

Offizielles Dokument: http://www.w3.org/tr/svg11/