Introduction au SVG 2D en HTML5 12 – Introduction aux compétences du didacticiel SVG DOM et DOM Operations_html5

L'utilisation de scripts peut facilement effectuer diverses tâches complexes, et constitue également un moyen courant de réaliser une animation et une interaction. Puisque SVG est un élément HTML, il prend en charge les opérations DOM ordinaires. Et comme SVG est essentiellement un document XML, il existe également une opération DOM spéciale, principalement appelée SVG DOM. Bien entendu, comme IE ne prend actuellement pas en charge SVG, le développement de pages SVG basées sur IE nécessite des méthodes différentes. En fait, tout le monde connaît cette partie de la connaissance, alors jetons-y un bref coup d’œil.

Opérations DOM dans les pages HTML
Tout le monde devrait être familier avec DOM :

Copier le codeLe code est le suivant :

= "http://www.w3.org/2000/svg";
var boxWidth = 300;
var boxHeight = 300;
var svgElem = document.createElementNS (xmlns, "svg");
svgElem.setAttributeNS (null, "viewBox", "0 0 " boxWidth " " boxHeight);
svgElem.setAttributeNS (null, "largeur", boxWidth
svgElem.setAttributeNS (null, "hauteur); " , boxHeight);
svgElem.style.display = "block";
var g = document.createElementNS (xmlns, "g");
svgElem.appendChild (g);
g. setAttributeNS (null, 'transform', 'matrix(1,0,0,-1,0,300)');
// dessiner un dégradé linéaire
var defs = document.createElementNS (xmlns, "defs");
var grad = document.createElementNS (xmlns, "linearGradient");
grad.setAttributeNS (null, "id", "gradient"); % ");
grad.setAttributeNS (null, "x2", "0%");
grad.setAttributeNS (null, "y1", "100%");
grad.setAttributeNS (null , "y2", "0%");
var stopTop = document.createElementNS (xmlns, "stop");
stopTop.setAttributeNS (null, "offset", "0%"); stopTop .setAttributeNS (null, "stop-color", "#ff0000");
grad.appendChild (stopTop);
var stopBottom = document.createElementNS (xmlns, "stop"); setAttributeNS (null, "offset", "100%");
stopBottom.setAttributeNS (null, "stop-color", "#0000ff"); appendChild (grad);
g.appendChild (defs);
// dessiner des bordures
var coords = "M 0, 0"
coords = " l 0, 300"; coords = " l 300, 0";
coords = " l 0, -300";
coords = " l -300, 0"
var path = document.createElementNS (xmlns, "path"; ) ;
chemin.setAttributeNS (null, 'AVC', "#000000");
chemin.setAttributeNS (null, 'largeur de trait', 10
chemin.setAttributeNS (null, 'AVC); - linejoin', "round");
path.setAttributeNS (null, 'd', coordonnées);
path.setAttributeNS (null, 'fill', "url(#gradient)"); chemin .setAttributeNS (null, 'opacity', 1.0);
g.appendChild (chemin);
var svgContainer = document.getElementById ("svgContainer"); > }


;



Avez-vous remarqué que le fonctionnement DOM des éléments HTML ordinaires est exactement le même :
Sélectionnez un élément : document.getElementById
Créez un élément : document.createElementNS
Une autre façon de créer des éléments enfants : element createChildNS.
Ajouter un élément : node.appendChild
Définir les attributs de l'élément : element.setAttributeNS/element.setAttribute
En plus des opérations ci-dessus, les opérations et attributs suivants sont également courants :
Obtenir le attributs Valeur de l'attribut : element.getAttributeNS/element.getAttribute
Vérifier si un attribut existe sur l'élément : element.hasAttributeNS
Supprimer un attribut de l'élément : element.removeAttributeNS
Élément parent, élément enfant et nœud frère : element.parentNode/element.firstChild/child.nextSibling
Ces méthodes ne seront pas présentées en détail ici de plus, la structure des nœuds de l'arborescence DOM et la relation d'héritage entre les objets sont également similaires, elles ne le seront donc pas ; décrit en détail. Les étudiants qui en ont besoin peuvent se référer ultérieurement à la documentation de DOM Core Object.
Cependant, il convient de noter que SVG est essentiellement un document XML, donc les méthodes DOM de base utilisées se terminent toutes par NS pour fournir des espaces de noms associés ; si un espace de noms a été fourni lors de la création d'un élément et qu'il n'y a pas plusieurs espaces de noms ; problème, alors lors de la définition des attributs associés, vous pouvez également choisir d'utiliser la version sans NS, par exemple en utilisant directement element.setAttribute pour définir la valeur de l'attribut, mais en général, il est toujours fortement recommandé d'utiliser la version avec la terminaison NS, car cette version fonctionne toujours bien, même dans le cas de plusieurs espaces de noms.
SVG DOM
En quoi est-ce différent du DOM standard Je n'ai trouvé aucune information complète Actuellement, je sais seulement que les méthodes d'attribution des attributs sont différentes. Si des étudiants sont au courant, n'hésitez pas à me le faire savoir.
Dans l'exemple ci-dessus, nous utilisons element.setAttributeNS/element.setAttribute pour attribuer des valeurs aux attributs. Dans SVG DOM, vous pouvez utiliser la méthode orientée objet pour attribuer des valeurs aux attributs des objets en accédant au point. Par exemple, voici deux méthodes de comparaison :
Méthode DOM commune :

Copier le code

Le code est le suivant :

element.setAttribute("x", "10");
element.setAttribute("y", "20"); ("width", "100%");
element.setAttribute("height", "2em");

Et la manière SVG DOM :

Copier le code Le code est le suivant :

element.x.baseVal.value = 10
element; .y.baseVal.value = 20;
element.width .baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 100);
element.height.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_EMS, 10); >
Le script DOM est un script traditionnel, caractérisé par la transmission de « chaînes de valeurs » à Construct pour définir des éléments individuels. L'avantage du style de script SVG DOM est que vous n'avez pas besoin de créer une "chaîne de valeur", les performances sont donc meilleures que celles du script DOM.

Script intégré dans SVG

Si vous souhaitez ajouter un script dans SVG, vous devez utiliser l'élément script Cela a déjà été mentionné. En dehors de cela, c'est essentiellement. la même chose que de mettre le script dans C'est la même chose dans le HTML externe. Regardez un exemple :

Copiez le code

Le code est le suivant :

Cliquez sur ce texte pour afficher la couleur du rectangle.
Cliquez sur le rectangle pour afficher la zone du rectangle.
Cliquez sur ce texte pour afficher le numéro d'enfant
éléments de l'élément racine.

1. Il s'agit d'un document.getElementById ou d'un document.getElementByClassName 2. Il s'agit d'un document.documentElement ou d'un document.rootElement.document.3. Il s'agit d'un projet evt.target.对象。
其余的脚本基本和普通的DOM是一样的。


实用参考：

脚本索引：http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
开发中心：https://developer.mozilla.org/en/SVG
热门参考：http://www.chinasvg.com/
官方文档：http://www.w3.org/TR/SVG11/
API DOM Core Object：http://reference.sitepoint.com/javascript/Document
SVG DOM常用属性和方法 :http://riso.iteye.com/blog/393454, http://riso.iteye.com/blog/393459