SVG animate con elementi aggiunti dinamicamente

Question

Sulla base di this codice, sto cercando di animare un elemento SVG generati dinamicamente:

var svgnode = document.createElementNS('http://www.w3.org/2000/svg','svg'); 
var circle = document.createElementNS('http://www.w3.org/2000/svg','circle'); 
circle.setAttribute("cx", "10"); 
circle.setAttribute("cy", "10"); 
circle.setAttribute("r", "10"); 
circle.setAttribute("fill", "blue"); 
var ani = document.createElementNS("http://www.w3.org/2000/svg","animateTransform"); 
ani.setAttribute("attributeName", "transform"); 
ani.setAttribute("attributeType", "xml"); 
ani.setAttribute("type", "translate"); 
ani.setAttribute("from", "10"); 
ani.setAttribute("to", "100"); 
ani.setAttribute("begin", "0s"); 
ani.setAttribute("dur", "2s"); 
ani.setAttribute("fill", "freeze"); 
circle.appendChild(ani); 
svgnode.appendChild(circle); 
document.getElementById('mydiv').appendChild(svgnode); 

l'SVG si presenta bene, ma l'animazione non funziona. Se scrivo il codice equivalente in semplice HTML/SVG funziona. Sto usando Chrome.

Answer 1

Non funzionerebbe se aggiunto dinamicamente in seguito su chrome (funzionerebbe con FF).

vedere http://jsfiddle.net/tap0ri/SF5nE/2/

questo è sembra essere Chrome bug.

Answer 2

Definitivamente [ancora] un bug con Chrome. Esecuzione di Chrome 19.0.1084.52

Questo codice funziona: http://jsfiddle.net/t3d28/

Questo codice ancora non funziona: http://jsfiddle.net/tap0ri/SF5nE/2/

Answer 3

non lavori su entrambi i navigatori con viewBox = "0 0 0 0".

lavora qui:

<div id="mydiv"> 
    <svg id="svgNode" version="1.1" width="100%" height="100%" viewBox="0 0 100% 100%" preserveAspectRatio="xMidYMid meet" id="ext-element-180"></svg> 
</div> 

vedi: https://jsfiddle.net/oOroBax/xkb89y4h/

Answer 4

ho ancora lo stesso problema di 5 anni fa :) (e con SVG-filtro troppo)

io uso follow mod:

1. Ho impostato tutti gli attributi may con setAtteribute, ad esempio ani.setAttr ibute ("attributeName", "transform");

2. Ho letto e impostato il mio innerHTML SVG-root: $ svgRoot.html ($ svgRoot.html());

Speranza che aiuta qualcuno, o qualcuno mi può dire un modo migliore :)