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 HTMLTout 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>
<body onload = "CreateSvg ()">
<div id = "svgContainer"> </div>
</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 SVGSi 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">
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
</ head>
<body>
<svg xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http://www.w3.org/1999/xlink">
<script type = "text / ecmascript">
<! [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>
<g id = "firstGroup">
<rect id = "mybluerect" x = "40" y = "20" fill = "bleu" onclick = "showrectarea (evt)" />
<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