HTML5 SVG 2D Einführung 7 – Wiederverwendung und Referenz von SVG Elements_html5 Tutorial-Fähigkeiten

Wir haben bereits viele grafische Elemente eingeführt, wenn viele Grafiken gleich sind. Müssen wir dann jedes Mal ein neues definieren? Können wir einige Grafiken teilen? Dies ist der Schwerpunkt dieses Abschnitts – die Wiederverwendung von SVG-Elementen.

Combined-g-Element
Das g-Element ist ein Container, der eine Gruppe verwandter grafischer Elemente zu einem Ganzen kombiniert. Auf diese Weise können wir mit diesem Ganzen operieren. Dieses Element kann normalerweise in Verbindung mit den Elementen desc und title verwendet werden, um Strukturinformationen über das Dokument bereitzustellen. Gut strukturierte Dokumente sind im Allgemeinen lesbar und werden effizient wiedergegeben. Schauen Sie sich ein kleines Beispiel an:

Kopieren Sie den Code

Der Code lautet wie folgt:

version="1.1"width="5cm"height="5cm">
Zwei Gruppen, jeweils zwei Rechtecke< ;/desc>
🎜>
>
height="1cm" />
width="4.98cm "height="4.98cm"
fill="none" Stroke="blue" Stroke-width=".02cm"/>

Beachten Sie einige Punkte
:
1.xmlns="http://www.w3.org/2000/svg" gibt an, dass der Standard-Namespace des gesamten SVG-Elements SVG ist. Dies kann weggelassen werden, wenn keine Unklarheiten bestehen. Da es sich bei dem SVG-Dokument um ein XML-Dokument handelt, gelten hier die entsprechenden Regeln des XML-Namensraums. Sie können beispielsweise einen Namespace für die SVG-Anzeige angeben, einen Alias ​​für den Namespace bereitstellen usw.
2.g-Elemente können verschachtelt werden.
3. Den kombinierten Grafikelementen kann wie einem einzelnen Element ein ID-Wert zugewiesen werden. Auf diese Weise müssen Sie bei Bedarf (z. B. bei Animation und Wiederverwendung einer Gruppe von Elementen) nur auf diesen ID-Wert verweisen.
4. Durch das Kombinieren einer Gruppe von Grafikelementen können die zugehörigen Attribute dieser Gruppe von Elementen einheitlich festgelegt werden (Füllung, Strich, Transformation usw.). Dies ist auch ein Szenario, in dem eine Kombination verwendet wird.

Template-symbol element symbol element wird verwendet, um eine Grafikvorlage zu definieren (die Vorlage kann viele Grafiken enthalten. Diese Vorlage kann durch das use-Element instanziiert werden). Die Funktion der Vorlage ist der des g-Elements sehr ähnlich. Beide stellen eine Reihe von Grafikobjekten bereit, es gibt jedoch einige Unterschiede. Der Unterschied zum g-Element ist:
1. Das Symbolelement selbst wird nicht gerendert, sondern nur Instanzen der Symbolvorlage.
2. Das Symbolelement kann die Attribute „viewBox“ und „preserveAspectRatio“ haben, die es dem Symbol ermöglichen, das Grafikelement zu skalieren.

Aus Sicht des Renderns sind Elemente, die dem Symbolelement ähneln, Markierungselemente (Pfeile und Beschriftungen definieren) und Musterelemente (Farben definieren). Diese Elemente werden grundsätzlich nicht direkt gerendert. Aus diesem Grund ist das Attribut „display“ für Symbole bedeutungslos.
Der folgende modifizierte Code zeigt, wie das Symbol verwendet wird:



Kopieren Sie den Code


Der Code lautet wie folgt:

xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"width="5cm"height="5cm">Zwei Gruppen, jeweils zwei Rechtecke

" height="1cm"/>

" .02cm"width="4.96cm"height="4.96cm"
fill="none"Stroke="blue"Stroke-width=".02cm"/> >

define-defs-Element
SVG ermöglicht es Ihnen, einen Satz von Objekten zu definieren und diesen Satz von Objekten dann wiederzuverwenden (beachten Sie, dass es sich nicht nur um grafische Objekte handelt). Das häufigste Beispiel besteht darin, eine Verlaufsfarbe zu definieren und diese dann dem Füllattribut in anderen Grafikobjekten zuzuweisen. Verlaufsfarben werden bei der Definition nicht gerendert, sodass Objekte dieses Typs überall platziert werden können. In Grafikobjekten gibt es häufig eine Wiederverwendung, und wir möchten beim Definieren nicht direkt rendern, sondern an der referenzierten Stelle. Dies kann mithilfe des Defs-Elements erreicht werden.

Im Allgemeinen besteht der empfohlene Ansatz darin, referenzierte Objekte nach Möglichkeit in Defs-Elementen zu platzieren. Diese Objekte sind normalerweise: altGlyphDef, clipPath, Cursor, Filter, Marker, Maske, Muster, linearGradient, radialGradient, Symbol- und Grafikobjekte usw. Die Definition dieser Objekte in Defs-Elementen erleichtert das Verständnis und verbessert so die Zugänglichkeit.

Tatsächlich bieten das G-Element, das Symbolelement und das Defs-Element als Containerobjekte alle Wiederverwendungsfunktionen in unterschiedlichem Maße, aber die Eigenschaften jedes Elements können leicht unterschiedlich sein: Beispielsweise wird das G-Element direkt gerendert , symbol und defs werden nicht direkt gerendert. Das Symbol enthält das viewBox-Attribut und es wird ein neues Ansichtsfenster erstellt.

Normalerweise wird das id-Attribut den in defs definierten Elementen zugewiesen und direkt dort verwendet, wo es verwendet wird. Je nach Element können diese Definitionen an unterschiedlichen Stellen verwendet werden. Beispielsweise wird die folgende progressive Farbe als Attribut verwendet:

Code kopieren

Der Code lautet wie folgt:

xmlns="http://www.w3.org/2000 /svg"version=" 1.1">
LocalURIreferenceswithinancestor's'defs'element.



🎜>> ;
fill="url(#Gradient01)"/> Die Definition grafikbezogener Elemente kann mithilfe des Verwendungselements mit dem Dokument verknüpft werden. Zum Beispiel:

Code kopieren

Der Code lautet wie folgt:

xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www. w3.org/ 1999/xlink"> ExampleUse01-Simplecaseof'use'ona'rect'

fill="none "Stroke="Blue"Stroke-Width=".2"/> > ;


Bitte beachten Sie hier die Verwendung des xlink-Namespace. Obwohl die meisten Viewer dies korrekt anzeigen, sollte der xlink-Namespace aus Konsistenzgründen im Element definiert werden.

Referenz-Use-Element
Alle SVG-, Symbol-, G-, einzelnen Grafikelemente und Use-Elemente können im Wesentlichen durch Use-Elemente als Vorlagenobjekte (z. B. Initialisierung) referenziert werden. Der durch die Verwendung referenzierte Grafikinhalt wird am angegebenen Ort gerendert. Im Gegensatz zum Image-Element kann das Use-Element nicht auf das gesamte Dokument verweisen. Das
use-Element verfügt außerdem über die Attribute x, y, width und height. Wenn sie nicht weggelassen werden, werden die Koordinaten oder die Länge des referenzierten Grafikinhalts dem aktuellen Benutzerkoordinatenraum zugeordnet. Die Funktion des

use-Elements entspricht dem tiefen Kopieren des referenzierten Objekts in einen unabhängigen, nicht öffentlichen DOM-Baum. Der übergeordnete Knoten dieses Baums ist das use-Element. Obwohl es sich um einen nicht öffentlichen DOM-Knoten handelt, handelt es sich im Wesentlichen immer noch um einen DOM-Knoten, sodass alle Attributwerte, Animationen, Ereignisse, CSS-bezogenen Einstellungen usw. des referenzierten Objekts kopiert werden und weiterhin funktionieren, und diese Knoten auch erben Sie auch die relevanten Attribute des Elements und verwenden Sie Vorfahren (beachten Sie, dass es sich bei den referenzierten Elementen um tiefe Kopien handelt. Diese kopierten Elemente haben nichts mit den ursprünglichen Elementen zu tun, daher werden die Attribute der Vorfahrenknoten der referenzierten Elemente hier nicht geerbt.) Wenn diese Knoten selbst verwandte (CSS-)Eigenschaften sind und auch geerbte Eigenschaften überschreiben, sind diese mit gewöhnlichen DOM-Knoten konsistent. Seien Sie daher vorsichtig, wenn Sie „visibility:hidden“ für use-Elemente verwenden, da dies möglicherweise nicht unbedingt funktioniert. Da dieser Teil der Knoten jedoch nicht öffentlich ist, ist bei DOM-Operationen nur das Use-Element sichtbar, sodass nur das Use-Element bedient werden kann.

Aus Sicht des visuellen Effekts ähnelt das use-Element eher einem Platzhalter. Der visuelle Effekt nach dem Rendern ist der gleiche wie beim direkten Rendern mit dem referenzierten Objekt:
1.use-Elementreferenz Ein Symbolelement
In diesem Fall ist der visuelle Effekt äquivalent zu:
(1) Ersetzen Sie das use-Element durch das g-Element
(2) Teilen Sie use durch x, y, width, height, )Ersetzen Sie das referenzierte Symbolelement durch ein SVG-Element. Dieses SVG-Element verwendet explizit die Breiten- und Höhenattribute des Verwendungselements (das Verwendungselement ohne diese Attribute ist 100 %). (5) Ändern Sie die Grafik des referenzierten Symbolelements Der Inhalt wird tief in die ersetzte SVG-Datei kopiert.

2. Das use-Element bezieht sich auf ein SVG-Element

In diesem Fall ist der visuelle Effekt äquivalent zu: (1) Ersetzen Sie das use-Element durch das g-Element; >(2) Verschieben Sie alle Nutzungsattribute außer x, y, width, height, xlink:href in das g-Element. (3) Ändern Sie die x- und y-Attribute der Nutzung in translator(x, y) und hängen Sie sie an zu g Das Transformationsattribut des Elements ist das letzte; (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 verwendet die Originalwerte). ​​wenn es diese Attribute nicht hat);

3. Andere Situationen

Der visuelle Effekt ist in diesen Fällen äquivalent zu:
(1) Ersetzen Sie das use-Element durch das g element;
(2) Teilen Sie use durch x , y, width, height, xlink: Alle Attribute außer href werden in das g-Element verschoben (3) Ändern Sie die x- und y-Attribute von use in translator( x, y) und hängen Sie sie an das Ende des Transformationsattributs des g-Elements an. (4) Kopieren Sie das Referenzelement.
Sehen Sie sich den visuellen Effekt des folgenden Beispiels an.




Code kopieren

Der Code lautet wie folgt:

xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org /1999/xlink"> ExampleUse03-'use'witha'transform'attribute

> ;fill="none"Stroke="blue"Stroke-width=".2"/ >transform="translate(20, 2.5)rotate(10)"/>




Das Erscheinungsbild des Bildes unten ist das gleiche wie das Bild oben
:

Code kopieren
Code wie folgt:

xmlns="http://www.w3.org/2000/svg"version= "1.1"> ExampleUse03-'use'witha'transform'attribute< ;/desc> fill="none"Stroke="blue"Stroke-width=". 2"/>

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/
Offizielle Dokumentation: http://www.w3.org/TR/SVG11/