Question

我对页面加载有要求我需要创建一个'Image'属性并将其附加到svg元素以启动动画。但是，我尝试创建Image和关联的animate元素并将其附加到svg元素。图像显示在页面上，但它没有动画。

任何人都可以帮忙。

代码添加在 http://jsbin.com/dofun/1/edit?html,js,output

由于 Pavan Kumar

Answer 1

设置动画的持续时间是必需的。如果你添加

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

如果我添加了一个带有适当id的svg元素，它会为我正确动画。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <svg width="100%" height="100%" id="svg_image"/>
</body>
</html>

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);

如何动态创建svg元素并为图像设置动画

1 个答案: