html动态生成svg,如何动态创建svg元素并为图像添加动画

设置的持续时间的动画是强制性的。如果你添加

animate.setAttribute('dur', '3s');

它为我提供了正确的动画，只要我添加一个svg元素和一个合适的id。

JS Bin

body, html {

width : 100%;

height: 100%;

}

var img = document.createElementNS('http://www.w3.org/2000/svg','image');

img.setAttributeNS(null,'height','536');

img.setAttributeNS(null,'width','536');

img.setAttributeNS('http://www.w3.org/1999/xlink','href','https://upload.wikimedia.org/wikipedia/commons/2/22/SVG_Simple_Logo.svg');

img.setAttributeNS(null,'x','10');

img.setAttributeNS(null,'y','10');

img.setAttributeNS(null, 'visibility', 'visible');

img.setAttributeNS(null,'id','image_test');

// animate object

var animate = document.createElementNS('http://www.w3.org/2000/svg','animate');

animate.setAttributeNS(null,'attributeName','x');

animate.setAttributeNS(null,'from',500);

animate.setAttributeNS(null,'to',0);

animate.setAttribute('dur', '3s');

//append animate with image

img.appendChild(animate);

document.getElementById("svg_image").appendChild(img);