Javascript 如何动态创建svg元素并设置图像动画
我对页面加载有一个要求，我需要创建一个“Image”属性并将其附加到svg元素以启动动画。但是，我尝试创建图像和相关的动画元素，并将其附加到svg元素。图像显示在页面上，但没有设置动画 有谁能帮忙吗 代码添加在 谢谢Javascript 如何动态创建svg元素并设置图像动画,javascript,svg,Javascript,Svg,我对页面加载有一个要求，我需要创建一个“Image”属性并将其附加到svg元素以启动动画。但是，我尝试创建图像和相关的动画元素，并将其附加到svg元素。图像显示在页面上，但没有设置动画 有谁能帮忙吗 代码添加在 谢谢 Pavan Kumar必须设置动画的持续时间。如果你加上 animate.setAttribute('dur', '3s'); 如果我添加了一个具有适当id的svg元素，它将为我正确设置动画 <!DOCTYPE html> <html> <head
Pavan Kumar必须设置动画的持续时间。如果你加上
animate.setAttribute('dur', '3s');
<!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);
JS-Bin
正文，html{
宽度：100%；
身高：100%；
}
var img=document.createElements（'http://www.w3.org/2000/svg","形象",；
img.setAttributeNS（null，'height'，'536'）；
setAttributeNS（null，'width'，'536'）；
图像设置属性（'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'）；
setAttributeNS（null，'id'，'image_test'）；
//设置对象动画
var animate=document.createElements（'http://www.w3.org/2000/svg","动画",；
setAttributeNS（null，'attributeName'，'x'）；
动画.setAttributeNS（null，'from'，500）；
animate.setAttributeNS（null，'to'，0）；
animate.setAttribute（'dur'，'3s'）；
//用图像附加动画
img.appendChild（动画）；
document.getElementById（“svg_图像”）.appendChild（img）；
createElements