HTML5 SVG 2D Introduction 7 - Réutilisation et référence des éléments SVG

Auteur：Eve Cole Date de mise à jour：2025-04-12 02:48:01

J'ai déjà introduit beaucoup d'éléments graphiques. Si de nombreux éléments graphiques sont les mêmes, dois-je en définir un nouveau à chaque fois? Pouvons-nous partager des graphiques? C'est l'objectif de cette section - la réutilisation des éléments SVG.

Combinaison -g éléments

L'élément G est un conteneur qui combine un groupe d'éléments graphiques connexes dans un tout; De cette façon, nous pouvons opérer sur tout cet ensemble. Cet élément peut généralement être utilisé en conjonction avec les éléments DESC et titres pour fournir les informations de structure du document. Les documents bien structurés sont généralement bien lisibles et rendus. Voir un petit exemple:

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

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

<ESC> TWOGROUPS, EveryoftWorkEctangles </SESC>

</g>

</g>

<! - Ligne de showout de canvasing'rect'element ->

<rectx = ". 01cm" y = ". 01cm" width = "4.98cm" height = "4.98cm"

fill = "non" tronçon = "bleu" trait-width = ". 02cm" />

</svg>

Quelques points à noter :

1.xmlns = http: //www.w3.org/2000/svg indique que l'espace de noms par défaut de l'ensemble de l'élément SVG est SVG. Cela peut être omis lorsqu'il n'y a pas d'ambiguïté. Étant donné que le document SVG est un document XML, les règles pertinentes pour l'espace de noms XML sont applicables ici. Par exemple, vous pouvez donner l'espace de noms spécifié affiché dans SVG, fournir un alias à l'espace de noms, etc.

2.G Les éléments peuvent être imbriqués.

3. Les éléments graphiques combinés sont les mêmes que les éléments individuels, et la valeur d'ID peut être donnée. De cette façon, si nécessaire (comme l'animation et la réutilisation d'un groupe d'éléments), vous pouvez simplement vous référer à cette valeur d'identification.

4. La combinaison d'un ensemble d'éléments graphiques peut définir les attributs pertinents de cet ensemble d'éléments (remplissage, trait, transformation, etc.), qui est également un scénario où des combinaisons sont utilisées.

Modèle - élément symbole

L'élément symbole est utilisé pour définir un modèle graphique (le modèle peut contenir de nombreux graphiques), qui peuvent être instanciés par l'élément d'utilisation. Les fonctions du modèle sont très similaires à l'élément G, tous deux fournissant un ensemble d'objets graphiques, mais il existe des différences. La différence par rapport à l'élément G est:

1. L'élément symbole lui-même ne sera pas rendu, seules les instances du modèle de symbole seront rendues.

2. L'élément de symbole peut avoir des attributs Viewbox et Preservaspectratio, qui permettent aux éléments graphiques de symbole de symbole.

D'un point de vue de rendu, des éléments similaires aux éléments de symbole sont des éléments marqueurs (définissant les flèches et les marqueurs) et les éléments de motif (définissant la couleur); Ces éléments ne seront pas rendus directement; Leur utilisation est essentiellement instanciée par l'élément d'utilisation. C'est précisément pour cette raison que l'attribut «affichage» n'a pas de sens pour le symbole.

Le code modifié suivant montre comment le symbole est utilisé:

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

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

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

<ESC> TWOGROUPS, EveryoftWorkEctangles </SESC>

</symbol>

</g>

<usexlink: href = "# group1" cible = "_ blanc" rel = "nofollow">

<! - Ligne de showout de canvasing'rect'element ->

<rectx = ". 02cm" y = ". 02cm" width = "4.96cm" height = "4.96cm"

fill = "non" tronçon = "bleu" trait-width = ". 02cm" />

</svg>

Définir l'élément -defs

SVG vous permet de définir un ensemble d'objets, puis de le réutiliser (notez qu'il ne s'agit pas seulement d'un objet graphique). L'exemple le plus courant est de définir une couleur de dégradé, puis d'attribuer des attributs de remplissage à d'autres objets graphiques. La définition de la couleur du gradient ne sera pas rendue, de sorte que les objets de ce type peuvent être placés n'importe où. La réutilisation se trouve souvent dans les objets graphiques, et nous ne voulons pas rendre directement lors de la définition, mais nous voulons plutôt rendre dans des références. Cela peut être implémenté à l'aide de l'élément Defs.

D'une manière générale, l'approche recommandée consiste à placer l'objet référencé dans l'élément Defs dans la mesure du possible. Ces objets sont généralement: altglyphdef, clippathe, curseur, filtre, marqueur, masque, motif, objets linéaire, radialgradient, symbole et graphique. La définition de ces objets dans l'élément Defs est facile à comprendre, il améliore donc l'accessibilité.

En fait, les éléments G, les éléments de symbole et les éléments de défenses car les objets de conteneur fournissent tous une réutilisation à des degrés divers, mais les caractéristiques de chaque élément peuvent être légèrement différentes: par exemple, les éléments G sont rendus directement, le symbole et les points ne seront pas rendus directement, le symbole contient l'attribut de la boîte de vue, qui créera une nouvelle fenêtre.

Habituellement, les éléments définis dans Defs se voient attribuer un attribut ID et utilisés directement partout où ils sont utilisés. Selon les éléments, ces définitions peuvent être utilisées à différents endroits, telles que les couleurs progressives suivantes comme attributs:

<svgWidth = "8cm" height = "3cm"

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

<ESC> LocalireReferences withithinancestor's'defs 'élément. </sc>

<defs>

</ lineargradient>

</fs>

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

fill = "url (# gradient01)" />

</svg>

La définition des éléments liés au graphique peut être liée au document à l'aide de l'élément d'utilisation. Par exemple:

<svgwidth = "10cm" height = "3cm" Viewbox = "0010030" version = "1.1"

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

<esc> exampleUse01-simplecaseof'use'ona'rect '</sc>

<defs>

</fs>

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

fill = "non" tronçon = "blue" tram-width = ". 2" />

</svg>

Veuillez noter l'utilisation de l'espace de noms XLink ici. Bien que la plupart des téléspectateurs affichent également cet élément correctement sans lui, pour la cohérence, l'espace de noms XLink doit être défini sur l'élément <svg> </svg>.

Élément d'utilisation de devis

Tout svg, symbole, g, élément graphique unique et élément d'utilisation peut essentiellement être référencé (par exemple initialisé) comme objets de modèle par l'élément d'utilisation. Le contenu graphique référencé par utilisation sera rendu à l'emplacement spécifié. Contrairement à l'élément d'image, l'élément d'utilisation ne peut pas référencer l'intégralité du document.

L'élément d'utilisation a également des attributs x, y, largeur et hauteur. Ces attributs peuvent être omis. S'il n'est pas omis, les coordonnées ou la longueur du contenu graphique référencées seront mappées dans l'espace de coordonnées utilisateur actuel.

Le processus d'action de l'élément d'utilisation est équivalent à la copie profondément de l'objet référencé dans un arbre DOM non public indépendant; Le nœud parent de cet arbre est l'élément d'utilisation. Bien qu'il s'agisse d'un nœud DOM non public, il s'agit essentiellement d'un nœud DOM. Par conséquent, toutes les valeurs d'attribut, les animations, les événements et les paramètres liés à CSS de l'objet référencé seront copiés et fonctionneront toujours. De plus, ces nœuds hériteront également des attributs pertinents de l'élément d'utilisation et de l'utilisation de l'ancêtre (notez que les éléments référencés sont des copies profondes, et ces éléments copiés n'ont rien à voir avec l'élément d'origine, donc les attributs du nœud d'ancêtre de l'élément référencé ne seront pas inhérites ici). Si ces nœuds eux-mêmes ont des attributs liés (CSS), ils écraseront également les attributs hérités, qui sont cohérents avec les nœuds DOM ordinaires, alors soyez prudent lorsque vous utilisez la visibilité: caché pour les éléments d'utilisation, et cela ne fonctionnera pas nécessairement. Cependant, comme ces nœuds sont non publiques, dans les opérations DOM, vous ne pouvez voir que l'élément d'utilisation, vous ne pouvez donc faire fonctionner l'élément d'utilisation.

Du point de vue des effets visuels, l'élément d'utilisation ressemble plus à un espace réservé, et l'effet visuel après rendu est le même que le rendu directement avec l'objet référencé:

1. L'utilisation se réfère à un élément symbole

Dans ce cas, l'effet visuel est équivalent à:

(1) modifier l'élément d'utilisation en l'élément G;

(2) déplacer toutes les propriétés d'utilisation sauf x, y, largeur, hauteur, xLink: href vers l'élément G;

(3) transformer les attributs x et y d'utilisation en tradlate (x, y) et ajoutez au dernier attribut de transformation de l'élément G;

(4) Remplacez l'élément de symbole référencé par l'élément SVG. Cet élément SVG utilisera explicitement les attributs de largeur et de hauteur de l'élément d'utilisation (l'élément d'utilisation n'a pas ces attributs, qui est à 100%);

(5) Copiez profondément le contenu graphique de l'élément de symbole référencé dans le SVG remplacé.

2. L'élément d'utilisation fait référence à un élément SVG

Dans ce cas, l'effet visuel est équivalent à:

(1) modifier l'élément d'utilisation en l'élément G;

(2) déplacer toutes les propriétés d'utilisation sauf x, y, largeur, hauteur, xLink: href vers l'élément G;

(3) transformer les attributs x et y d'utilisation en tradlate (x, y) et ajoutez au dernier attribut de transformation de l'élément G;

(4) Copiez l'élément SVG référencé, y compris le contenu. Cet élément SVG utilisera explicitement les attributs de largeur et de hauteur de l'élément d'utilisation (l'élément d'utilisation n'a pas ces attributs et utilise la valeur d'origine);

3. Autres situations

L'effet visuel dans ces cas est équivalent à:

(1) modifier l'élément d'utilisation en l'élément G;

(2) déplacer toutes les propriétés d'utilisation sauf x, y, largeur, hauteur, xLink: href vers l'élément G;

(3) transformer les attributs x et y d'utilisation en tradlate (x, y) et ajoutez au dernier attribut de transformation de l'élément G;

(4) Copiez les éléments référencés;

Voir les effets visuels de l'exemple suivant :

<svgwidth = "10cm" height = "3cm" Viewbox = "0010030" version = "1.1"

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

<esc> exampleUse03-'Use'Witha'Transform'Attribute </SESC>

<defs>

</fs>

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

fill = "non" tronçon = "blue" tram-width = ". 2" />

<usexlink: href = "# myrect"

transform = "tradlater (20,2,5) Rotation (10)" />

</svg>

La figure suivante ressemble à la figure ci-dessus :

<svgWidth = "10cm" height = "3cm" Viewbox = "0010030"

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

<esc> exampleUse03-'Use'Witha'Transform'Attribute </SESC>

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

fill = "non" tronçon = "blue" tram-width = ". 2" />

</g>

</svg>

Référence pratique:

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

Centre de développement: https://developer.mozilla.org/en/svg

Référence populaire: http://www.chinasvg.com/

Document officiel: http://www.w3.org/tr/svg11/