Agregando más elementos svg a mi documento en tiempo de ejecución

Tengo un archivo html, estoy agregando un elemento am dinámicamente, luego un rectángulo. Funciona bien en los diferentes navegadores (ignorando IE). Cuando trato de usar el mismo método para crear dinámicamente un elemento, no funciona en Chrome o Safari, solo en Opera. ¿Está mal mi sintaxis, o webkit probablemente no es compatible con agregar elementos en tiempo de ejecución? (el mismo elemento funciona bien si lo declaro como etiquetas iniciales). ¿Quizás se supone que no debo usar appendChild() con estos tipos de nodos? Esto es lo que tengo, deberías poder volcarlo en un archivo html y ejecutarlo. Si alguien tiene alguna idea de si hay una forma de evitar esto, sería genial:Agregando más elementos svg a mi documento en tiempo de ejecución

<html> 
<head> 
    <script> 

    window.onload = function() { 
     var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); 
     svg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink'); 
     svg.setAttribute('version', '1.1'); 
     svg.setAttribute('width', '800px'); 
     svg.setAttribute('height', '400px'); 
     document.body.appendChild(svg); 

     var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); 
     rect.setAttribute("id", "myrect"); 
     rect.setAttribute("fill","red"); 
     rect.setAttribute("stroke","black"); 
     rect.setAttribute("stroke-width","5"); 
     rect.setAttribute("x", "100"); 
     rect.setAttribute("y", "100"); 
     rect.setAttribute("width", "100"); 
     rect.setAttribute("height", "50"); 
     svg.appendChild(rect); 

     var anim = document.createElementNS('http://www.w3.org/2000/svg','animate'); 
     anim.setAttribute("attributeName", "width"); 
     anim.setAttribute("from", "100"); 
     anim.setAttribute("to", "400"); 
     anim.setAttribute("dur", "10s"); 
     anim.setAttribute("begin", "0s"); 
     anim.setAttribute("fill", "freeze"); 
     rect.appendChild(anim); 
    } 

</script> 
</head> 

<body> 
</body>

Fuente

2010-01-28 user246114

realmente se debe utilizar cuando se utiliza espacio de nombres setAttributeNS(null, ...) llama como document.createElementNS().

De xmlgraphics.apache.org/batik/faq.html

Sin embargo, es importante saber que algunas implementaciones hacen una diferencia entre setAttribute (x, y) y setAttributeNS (null, x, y), por lo que es una buena práctica use setAttributeNS que es la única forma interoperable garantizada de establecer atributos en un espacio de nombres implementación de DOM consciente.

Fuente

2010-01-28 16:57:06

Kyle, ¿cuál es el efecto de setAttributeNS (null, ...) vs setAttribute()? No estoy seguro de qué le hace al DOM, gracias. – user246114

desde: http://xmlgraphics.apache.org/batik/faq.html, "Sin embargo, es importante saber que algunas implementaciones hacen una diferencia entre setAttribute (x, y) y setAttributeNS (null, x, y), así que es una buena práctica usar setAttributeNS, que es la única manera interoperable garantizada de establecer atributos en una implementación de DOM que tenga en cuenta el espacio de nombres. " –

Ok gracias Kyle, iré con eso. – user246114

Ughh esto parece un error en el juego web. Tienes que llamar a node.beginElement() para iniciar la animación, pero en webkit no funciona, aparece en el rastreador de errores.

Explosión.

Fuente

2010-01-28 17:36:42 user246114

¿Tiene un enlace al error exacto en el rastreador de errores WebKit? Me ayudaría mucho. Gracias. – tillda

@tillda quizás esto ayude a http://stackoverflow.com/questions/8520493/svg-elements-will-not-animate-when-added-dynamically – Green

Agregando más elementos svg a mi documento en tiempo de ejecución

Respuesta

Cuestiones relacionadas