如何动态创建svg元素并对图像进行动画处理
[英]How to dynamically create svg element and animate a image
问题描述
我对页面加载有要求，我需要创建一个'Image'属性并将其附加到svg元素以启动动画。 但是，我尝试创建Image和关联的animate元素并将其附加到svg元素上。图像在页面上显示，但没有获得动画效果。
任何人都可以帮忙吗？
在http://jsbin.com/dofun/1/edit?html,js,output中添加的代码
感谢Pavan Kumar
1 个解决方案
解决方案1
1 已采纳 2014-03-02 22:21:26
必须设置动画的持续时间。 如果添加
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元素设置动画
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.