HTML5 SVG 2D Introducción 12 - Introducción a las operaciones SVG DOM y DOM

Autor：Eve Cole Fecha de actualización：2025-04-03 16:00:04

El uso de scripts puede completar fácilmente varias tareas complejas, y también es una forma convencional de completar la animación y la interacción. Dado que SVG es un elemento de HTML, admite operaciones DOM ordinarias. Dado que SVG es esencialmente un documento XML, también hay una operación DOM especial, que en su mayoría se llama SVG DOM. Por supuesto, dado que IE no admite SVG en la actualidad, desarrollar páginas SVG basadas en IE requiere diferentes métodos. Todos están realmente familiarizados con esta parte del conocimiento, así que echemos un vistazo brevemente a continuación.

Operaciones DOM en páginas HTML

Todos deberían estar familiarizados con Dom. Aquí hay un pequeño ejemplo:

#SVGContainer {

Ancho: 400px;

Altura: 400px;

Color de fondo: #A0A0A0;

}

</style>

función createSvg () {

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 (nulo, "ancho", boxwidth);

svgelem.setattributens (nulo, "altura", boxheight);

svgelem.style.display = "bloque";

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

svgelem.appendChild (g);

G.SetAttributens (NULL, 'Transform', 'Matrix (1,0,0, -1,0,300)');

// dibujar gradiente lineal

var defs = document.createElementns (xmlns, "defs");

var grad = document.createElementns (xmlns, "linealgradient");

Grad.SetAttributens (nulo, "id", "gradiente");

Grad.SetAttributens (nulo, "x1", "0%");

Grad.SetAttributens (nulo, "x2", "0%");

Grad.SetAttributens (NULL, "Y1", "100%");

Grad.SetAttributens (NULL, "Y2", "0%");

var stopTop = document.createElementns (xmlns, "parar");

stopTop.setAttributens (nulo, "offset", "0%");

stopTop.setAttributens (nulo, "stop-color", "#ff0000");

Grad.AppendChild (stoptop);

var stopbottom = document.createElementns (xmlns, "parar");

stopbottom.setattributens (nulo, "offset", "100%");

stopbottom.setattributens (nulo, "stop-color", "#0000ff");

Grad.AppendChild (stopbottom);

Defs.appendChild (graduado);

G.AppendChild (defs);

// dibujar bordes

VAR coordenadas = "M 0, 0";

coordenadas += "l 0, 300";

coordenadas += "l 300, 0";

Coords += "L 0, -300";

Coords += "L -300, 0";

var ruta = document.createElementns (xmlns, "ruta");

Path.SetAttributens (NULL, 'Stroke', "#000000");

Path.SetAttributens (NULL, 'Width de trazo', 10);

Path.SetAttributens (NULL, 'Stroke-LineJoin', "Round");

Path.SetAttributens (nulo, 'd', coordenadas);

Path.SetAttributens (nulo, 'relleno', "url (#gradient)");

Path.SetAttributens (NULL, 'Opacidad', 1.0);

G.AppendChild (ruta);

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

svgContainer.AppendChild (Svgelem);

}

</script>

</ablo>

</body>

¿Lo has descubierto? Es exactamente lo mismo que la operación DOM de los elementos HTML ordinarios:

Seleccionar elemento: document.getElementByID

Crear elemento: document.createElementns

Otra forma de crear elementos infantiles: Element.CreateChildns

Agregar elemento: node.appendChild

Establezca el atributo del elemento: elemento.setTributens/element.setAttribute

Además de las operaciones anteriores, las siguientes operaciones y propiedades también son muy comunes:

Obtenga el valor de atributo del elemento: elemento.getAttributens/element.getAttribute

Compruebe si existe un atributo en un elemento: element.hasattributens

Eliminar un atributo de un elemento: elemento.removeatTributens

Elemento principal, elemento infantil y nodo hermano: elemento

Estos métodos no se introducirán en detalle aquí; Además, la estructura del nodo del árbol DOM y la relación de herencia entre los objetos son similares, por lo que no explicaré en detalle. Los estudiantes que lo necesiten se referirán a la documentación del objeto DOM Core a continuación.

Sin embargo, debe tenerse en cuenta que SVG es esencialmente un documento XML, por lo que el método DOM utiliza básicamente un método con NS que finaliza para proporcionar espacios de nombres relacionados; Si el espacio de nombres ya se proporciona al crear un elemento y no hay problema con múltiples espacios de nombres, al establecer los atributos relacionados, también puede optar por usar una versión sin NS, como usar element.setTribute para establecer el valor de atributo directamente. Sin embargo, en general, todavía se recomienda usar una versión con final de NS, porque esta versión siempre funciona normalmente, incluso en el caso de múltiples espacios de nombres.

SVG DOM

No he encontrado ninguna información completa sobre esto y el DOM estándar. En la actualidad, solo sé que los métodos de asignación de atributos son diferentes. Si tiene algún estudiante que entienda esto, por favor dame un mensaje.

En el ejemplo anterior, usamos element.setTributens/element.setAttribute para asignar valores a los atributos. En SVG DOM, podemos usar un método orientado a objetos para asignar valores a los atributos del objeto a través de puntos de acceso. Por ejemplo, la siguiente es una comparación de los dos métodos:

Método DOM ordinario:

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

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

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

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

Y método SVG DOM:

element.x.baseval.value = 10;

element.y.baseval.value = 20;

element.width.baseval.newValuueSpecifiedUnits (svglength.svg_lengthtype_percentage, 100);

element.height.baseval.newvaluueSpecifiedUnits (svglength.svg_lengthtype_ems, 10);

Los guiones DOM son guiones tradicionales, y sus características son establecer elementos individuales mediante la creación de una cadena de valor. La ventaja del estilo de script SVG DOM es que no tiene que crear cadenas de valor, por lo que el rendimiento es mejor que los scripts DOM.

Scripts incrustados en SVG

Si desea agregar scripts dentro de SVG, debe usar elementos de script. Esto se ha mencionado antes. Además de esto, es básicamente lo mismo que poner scripts en el HTML afuera. Ver un ejemplo:

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

</ablo>

<Body>

<! [Cdata [

función showRectColor () {

alerta (document.getElementById ("mybluerect"). getAttributens (nulo, "relleno"));

}

función showRectArea (EVT) {

Var ancho = parsefloat (evt.target.getattributens (nulo, "ancho"));

var altura = parsefloat (evt.target.getattributens (nulo, "altura"));

alerta ("El área del rectángulo es:" + (ancho * altura));

}

function showrootchildrenr () {

alerta ("nr de niños:"+document.documentelement.childnodes.length);

}

]]>

</script>

<Text x = "40" y = "100" onClick = "showRectColor ()"> Haga clic en este texto para mostrar el color rectángulo. </text>

<Text x = "40" y = "130"> Haga clic en el rectángulo para mostrar el área del rectángulo. </ext>

<Text x = "40" y = "160" onClick = "showrootchildrenr ()"> Haga clic en este texto para mostrar el número de niños

<tspan x = "40" dy = "20"> elementos del elemento raíz. </pspan> </ext>

</g>

</svg>

</body>

</html>

En este ejemplo, se enumera una forma común de obtener objetos DOM :

1. Obtenga el objeto a través de métodos como document.getElementById o document.getElementByClassName;

2. Obtenga el objeto de documento a través de document.documentelement o document.rootelement;

3. Obtenga el objeto que genera el evento a través del parámetro del evento EVT.Target. La ventaja de este método es que puede obtener el objeto que genera el evento sin usar ID.

El resto de los guiones son básicamente los mismos que el DOM ordinario.

Referencia práctica:

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

Centro de desarrollo: https://developer.mozilla.org/en/svg

Referencia popular: http://www.chinasvg.com/

Documento oficial: http://www.w3.org/tr/svg11/

API de objeto Dom Core: http://reference.sitePoint.com/javascript/document

Propiedades y métodos comunes de SVG DOM: http://riso.iteye.com/blog/393454, http://riso.iteye.com/blog/393459