HTML5 SVG 2D Introduction 7—Réutilisation et référence des compétences du didacticiel SVG Elements_html5

Nous avons introduit de nombreux éléments graphiques plus tôt. Si de nombreux graphiques eux-mêmes sont identiques, devons-nous en définir un nouveau à chaque fois ? Pouvons-nous partager quelques graphiques ? C'est l'objet de cette section : la réutilisation des éléments SVG.

Élément g combiné
L'élément g est un conteneur qui combine un groupe d'éléments graphiques liés en un tout de cette manière, nous pouvons opérer sur cet ensemble. Cet élément peut généralement être utilisé conjointement avec les éléments desc et title pour fournir des informations structurelles sur le document. Les documents bien structurés sont généralement lisibles et rendus efficacement. Regardez un petit exemple :

Copiez le code

Le code est le suivant :

version="1.1"width="5cm"height="5cm">
Deux groupes, chacun de deux rectangles< ;/desc>

🎜>
>
height="1cm" />

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

Notez quelques points
 :
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é. Puisque le document svg est un document XML, les règles pertinentes de l'espace de noms XML sont applicables ici. Par exemple, vous pouvez spécifier un espace de noms pour l'affichage SVG, fournir un alias pour l'espace de noms, etc.
Les éléments 2.g peuvent être imbriqués.
3. Les éléments graphiques combinés peuvent recevoir une valeur d'identifiant tout comme un élément unique. De cette façon, en cas de besoin (comme l'animation et la réutilisation d'un groupe d'éléments), il vous suffit de référencer cette valeur d'identifiant.

4. La combinaison d'un groupe d'éléments graphiques peut définir uniformément les attributs associés de ce groupe d'éléments (remplissage, contour, transformation, etc.).
Élément Template-symbol

L'élément symbol est utilisé pour définir un modèle graphique (le modèle peut contenir de nombreux graphiques). Ce modèle peut être instancié par l'élément use. La fonction du modèle est très similaire à celle de l'élément g. Ils fournissent tous deux un ensemble d'objets graphiques, mais il existe quelques différences. La différence avec 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 symbole peut avoir les attributs viewBox et préservationAspectRatio, qui permettent au symbole de mettre à l'échelle l'élément graphique.

Du point de vue du rendu, les éléments similaires à l'élément symbol sont des éléments de marqueur (définissant les flèches et les étiquettes) et de motif (définissant les couleurs) ; ces éléments ne sont pas directement rendus ; leur utilisation consiste essentiellement à utiliser un élément pour instancier. Pour cette raison, l'attribut 'display' n'a aucune signification pour les symboles. Le code modifié suivant montre comment utiliser le symbole :




Copiez le code


Le code est le suivant :

xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"width="5cm"height="5cm"> Deux groupes, chacun de deux rectangles

" hauteur="1cm"/>


< usexlink :href="#group1"target="_blank"rel="nofollow">
" .02cm"width="4.96cm"height="4.96cm"
fill="none"Stroke="blue"Stroke-width=".02cm"/> >

élément define-defs
SVG permet de définir un ensemble d'objets puis de réutiliser cet ensemble d'objets (attention, pas seulement des objets graphiques). L'exemple le plus courant consiste à définir une couleur de dégradé, puis à l'attribuer à l'attribut de remplissage dans d'autres objets graphiques. Les couleurs dégradées ne sont pas rendues une fois définies, les objets de ce type peuvent donc être placés n'importe où. La réutilisation existe souvent dans les objets graphiques, et nous ne souhaitons pas effectuer le rendu directement lors de la définition, mais souhaitons le rendre à l'endroit référencé. Cela peut être réalisé en utilisant l'élément defs.

Généralement, l'approche recommandée consiste à placer les objets référencés dans les éléments defs autant que possible. Ces objets sont généralement : altGlyphDef, clipPath, curseur, filtre, marqueur, masque, motif, LinearGradient, radialGradient, symboles et objets graphiques, etc. Définir ces objets dans les éléments defs les rend plus faciles à comprendre, améliorant ainsi l'accessibilité.

En fait, l'élément g, l'élément symbol et l'élément defs en tant qu'objets conteneurs fournissent tous des fonctions de réutilisation à des degrés divers, mais les caractéristiques de chaque élément peuvent être légèrement différentes : par exemple, l'élément g est directement rendu , symbol et defs ne seront pas rendus directement. Le symbole contient l'attribut viewBox et une nouvelle fenêtre de vue sera créée.

Habituellement, l'attribut id est attribué aux éléments définis dans defs et utilisé directement là où il est utilisé. Selon l'élément, ces définitions peuvent être utilisées à différents endroits. Par exemple, la couleur progressive suivante est utilisée comme attribut :

Copier le code.

Le code est le suivant :

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



🎜>fill="url(#Gradient01)"/>


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

Copier le code

Le code est le suivant :

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"/>
Veuillez noter l'utilisation de l'espace de noms xlink ici. Bien que la plupart des téléspectateurs l'afficheront correctement sans cela, pour des raisons de cohérence, l'espace de noms xlink doit être défini sur l'élément

Élément d'utilisation de référence
Tout svg, symbole, g, élément graphique unique et élément d'utilisation peut essentiellement être référencé par des éléments d'utilisation en tant qu'objets de modèle (tels que l'initialisation). Le contenu graphique référencé par l'utilisation sera rendu à l'emplacement spécifié. Contrairement à l’élément image, l’élément use ne peut pas référencer l’intégralité du document. L'élément
use possède également des attributs x, y, width et height. Ces attributs peuvent être omis. S'ils ne sont pas omis, les coordonnées ou la longueur du contenu graphique référencé seront mappées à l'espace de coordonnées utilisateur actuel. La fonction de l'élément

use équivaut à une copie profonde de l'objet référencé dans une arborescence DOM indépendante et non publique ; le nœud parent de cette arborescence est l'élément use. Bien qu'il s'agisse d'un nœud DOM non public, il s'agit toujours d'un nœud DOM par essence, donc toutes les valeurs d'attribut, animations, événements, paramètres liés au CSS, etc. de l'objet référencé seront copiés et fonctionneront toujours, et ces nœuds fonctionneront toujours. héritez également des attributs pertinents de l'élément et utilisez les ancêtres (notez que les éléments référencés sont des copies complètes. Ces éléments copiés n'ont rien à voir avec les éléments d'origine, donc les attributs des nœuds ancêtres des éléments référencés ne seront pas hérités ici) Si ces nœuds eux-mêmes sont des propriétés liées (CSS) et remplaceront également les propriétés héritées, celles-ci sont cohérentes avec les nœuds DOM ordinaires, alors soyez prudent lorsque vous utilisez "visibility:hidden" sur les éléments use, car cela ne fonctionnera pas nécessairement. Cependant, comme cette partie des nœuds n'est pas publique, seul l'élément use peut être vu lors des opérations DOM, donc seul l'élément use peut être exploité.

Du point de vue de l'effet visuel, l'élément use ressemble plus à un espace réservé. L'effet visuel après le rendu est le même que le rendu directement avec l'objet référencé :
1.référence de l'élément use. Un élément symbole
Dans ce cas, l'effet visuel est équivalent à :
(1) Remplacer l'élément use par l'élément g
(2) Diviser use par x, y, width, height, )Remplacez l'élément symbol référencé par un élément svg. Cet élément svg utilisera explicitement les attributs width et height de l'élément use (l'élément use sans ces attributs sera 100%
(5) Changer le graphique); de l'élément de symbole référencé Le contenu est copié en profondeur dans le svg remplacé.

2. L'élément use fait référence à un élément svg
Dans ce cas, l'effet visuel est équivalent à : (1) Remplacer l'élément use par l'élément g ; >(2 ) Déplacez tous les attributs d'utilisation sauf x, y, width, height, xlink:href vers l'élément g
(3) Changez les attributs x, y d'utilisation en translation(x, y) et ajoutez to g L'attribut transform de l'élément est last ;
(4) Copiez l'élément svg référencé, y compris le contenu. Cet élément svg utilisera explicitement les attributs width et height de l'élément use (l'élément use utilisera les valeurs d'origine. ​​s'il n'a pas ces attributs);

3. Autres situations

L'effet visuel dans ces cas est équivalent à : (1) Remplacer l'élément use par le g element; (2) Diviser use par x , y, width, height, xlink : Tous les attributs autres que href sont déplacés vers l'élément g
(3) Changer les attributs x, y de use pour traduire( x, y), et ajoutez-les à la fin de l'attribut transform de l'élément g ;
(4) Copiez l'élément de référence

Regardez l'effet visuel de l'exemple ci-dessous
 :

Copier le code

Le code est le suivant :

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

ExampleUse03-'use'witha'transform'attribute< /desc>


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




L'apparence de l'image ci-dessous est la même que celle ci-dessus

 :

Copier le code

Code comme suit :

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

ExampleUse03-'use'witha'transform'attribute< ;/desc>
fill="none"Stroke="blue"Stroke-width=". 2"/>






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