HTML5 SVG 2D Introduction 12 - Introduction aux opérations SVG DOM et DOM

Auteur：Eve Cole Date de mise à jour：2025-04-03 16:00:04

L'utilisation de scripts peut facilement effectuer diverses tâches complexes, et c'est aussi un moyen grand public de terminer l'animation et l'interaction. Étant donné que SVG est un élément de HTML, il prend en charge les opérations DOM ordinaires. Étant donné que SVG est essentiellement un document XML, il existe également une opération DOM spéciale, qui est principalement appelée SVG DOM. Bien sûr, comme IE ne prend pas en charge SVG à l'heure actuelle, le développement de pages SVG basés sur IE nécessite différentes méthodes. Tout le monde est en fait très familier avec cette partie des connaissances, alors jetons un coup d'œil brièvement ci-dessous.

Opérations DOM dans les pages HTML

Tout le monde devrait être familier avec Dom. Voici un petit exemple:

<adal>

<style>

#svgContainer {

Largeur: 400px;

hauteur: 400px;

Color d'arrière-plan: # A0A0A0;

}

</ style>

<cript>

Fonction CreateVg () {

var xmlns = "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, "width", boxwidth);

svgelem.setAttributens (null, "hauteur", boxHeight);

svgelem.style.display = "bloc";

var g = document.CreateElementns (xmlns, "g");

Svgelem.ApendChild (G);

g.setAttributens (null, «transform», «matrice (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, "x1", "0%");

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-coulor", "# ff0000");

Grad.ApendChild (Stoptop);

var stopbottom = document.CreateElementns (xmlns, "stop");

stopbottom.setAttributens (null, "offset", "100%");

stopbottom.setAttributens (null, "stop-coulor", "# 0000ff");

Grad.ApendChild (Stopbottom);

Defs.ApendChild (Grad);

G.ApendChild (Defs);

// dessine des frontières

var coordonnées = "M 0, 0";

coordonnées + = "l 0, 300";

coordonnées + = "l 300, 0";

coords + = "l 0, -300";

coords + = "l -300, 0";

var path = document.CreateElementns (xmlns, "path");

path.setAttributens (null, 'stroke', "# 000000");

path.setAttributens (null, «tour de trait», 10);

path.setAttributens (null, 'stroke-linejoin', "rond");

path.setAttributens (null, «d», coordonnées);

path.setAttributens (null, 'fill', "url (#gradient)");

path.setAttributens (null, «opacité», 1.0);

G.APPEndChild (chemin);

var svgContainer = document.getElementById ("svgContainer");

svgContainer.ApendChild (Svgelem);

}

</cript>

</ head>

</docy>

L'avez-vous découvert? C'est exactement la même chose que le fonctionnement DOM d'éléments HTML ordinaires:

Sélectionner l'élément: document.getElementByid

Créer un élément: document.CreateElementns

Une autre façon de créer des éléments enfants: element.CreateChildns

Ajouter l'élément: Node.ApendChild

Définissez l'attribut de l'élément: élément.setAttributens / element.setAttribute

En plus des opérations ci-dessus, les opérations et propriétés suivantes sont également très courantes:

Obtenez la valeur d'attribut de l'élément: élément.getAttributens / element.getAttribute

Vérifiez si un attribut existe dans un élément: élément.

Supprimer un attribut d'un élément: élément.removeatTributtens

Élément parent, élément enfant et nœud de frère: élément.parentnode / élément.firstchild / child.nextsibling

Ces méthodes ne seront pas introduites en détail ici; De plus, la structure du nœud de l'arbre DOM et la relation d'héritage entre les objets sont similaires, donc je ne l'expliquerai pas en détail. Les étudiants qui en ont besoin feront référence à la documentation de l'objet Dom Core ci-dessous.

Cependant, il convient de noter que SVG est essentiellement un document XML, donc la méthode DOM utilise essentiellement une méthode avec NS se terminant pour fournir des espaces de noms connexes; Si l'espace de noms est déjà fourni lors de la création d'un élément et qu'il n'y a pas de problème avec plusieurs espaces de noms, alors lors de la définition des attributs associés, vous pouvez également choisir d'utiliser une version sans NS, telles que l'utilisation d'élément.setAttribute pour définir directement la valeur d'attribut. Cependant, en général, il est toujours fortement recommandé d'utiliser une version avec NS terminant, car cette version fonctionne toujours normalement, même dans le cas de plusieurs espaces de noms.

SVG DOM

Je n'ai trouvé aucune information complète à ce sujet et le DOM standard. À l'heure actuelle, je sais seulement que les méthodes d'attribution d'attributs sont différentes. Si vous avez des étudiants qui comprennent cela, donnez-moi un message.

Dans l'exemple ci-dessus, nous utilisons Element.SetAttributens / element.setAttribute pour attribuer des valeurs aux attributs. Dans SVG DOM, nous pouvons utiliser une méthode orientée objet pour attribuer des valeurs aux attributs d'objet via des points d'accès. Par exemple, ce qui suit est une comparaison des deux méthodes:

Méthode DOM ordinaire:

element.setAttribute ("x", "10");

element.setAttribute ("y", "20");

element.setAttribute ("largeur", "100%");

element.setAttribute ("Height", "2em");

Et méthode SVG DOM:

element.x.baseval.value = 10;

element.y.baseval.value = 20;

element.width.baseval.newValuesPecifiedUnits (svglthength.svg_lengthtype_percentage, 100);

element.height.baseval.newValuesPecifiedUnits (svglngth.svg_lengthtype_ems, 10);

Les scripts DOM sont des scripts traditionnels et leurs caractéristiques sont de définir des éléments individuels en créant une chaîne de valeur. L'avantage du style de script SVG DOM est que vous n'avez pas à créer des chaînes de valeur, donc les performances sont meilleures que les scripts DOM.

Scripts intégrés dans SVG

Si vous souhaitez ajouter des scripts à l'intérieur de SVG, vous devez utiliser des éléments de script. Cela a déjà été mentionné. En plus de cela, c'est fondamentalement la même chose que de mettre des scripts dans le HTML à l'extérieur. Voir un exemple:

<! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<adal>

</ head>

<body>

<! [Cdata [

fonction showrectColor () {

alert (document.getElementById ("mybluerect"). getAtTributtens (null, "fill"));

}

fonction showrectarea (evt) {

var width = paSefloat (evt.target.getAttributens (null, "width"));

var height = paSefloat (evt.target.getAttributens (null, "height"));

alerte ("la zone rectangulaire est:" + (largeur * hauteur));

}

fonction showrootchildrennr () {

alert ("nr des enfants:" + document.DocumentElement.ChildNodes.length);

}

]]>

</cript>

<text x = "40" y = "100" onclick = "showrectcolor ()"> Cliquez sur ce texte pour afficher la couleur rectangle. </Text>

<text x = "40" y = "130"> Cliquez sur le rectangle pour afficher la zone du rectangle. </Text>

<text x = "40" y = "160" onclick = "showrootchildrennr ()"> Cliquez sur ce texte pour afficher le nombre d'enfants

<tspan x = "40" dy = "20"> Éléments de l'élément racine. </span> </XET>

</g>

</svg>

</docy>

</html>

Dans cet exemple, une manière courante d'obtenir des objets DOM est répertoriée :

1. Obtenez l'objet via des méthodes telles que document.getElementById ou document.getElementByClassName;

2. Obtenez l'objet Document via document.DocumentElement ou document.Rootelement;

3. Obtenez l'objet qui génère l'événement via le paramètre de l'événement EVT.Target. L'avantage de cette méthode est que vous pouvez obtenir l'objet qui génère l'événement sans utiliser ID.

Le reste des scripts est fondamentalement le même que Dom ordinaire.

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/

API de l'objet DOM Core: http://reference.sitepoint.com/javascript/document

Propriétés et méthodes communes de SVG DOM: http://riso.iteye.com/blog/393454, http://riso.iteye.com/blog/393459