svg动态插入动画
我绘制了一根线 用动画让它转移的位置。第一次绘制出来是OK的，有动画效果。但是后面绘制的就没有动画效果了。不知道为什么呢?之前没有怎么了解SVG 。贴上代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="//cdn.bootcss.com/d3/3.5.16/d3.min.js"></script>
</head>
<body>
</body>
<script>
function getSvg(){
var width = 800,
height = 800;
var body=d3.select("body");
var svgs=body.select("svg");
if(svgs.size()>0){
return svgs;
}else{
svgs=body.append("svg").attr("width",width).attr("height",height);
}
return svgs;
}
function drawLine(){
var svg=getSvg();
console.info(svg);
var colors = ["green", "yellow", "skyblue", "orange"];
var g=svg.append("g");
g.append("path")
.attr("fill",colors[parseInt(Math.random()*(colors.length + 1))])
.attr("transform","scale(0.5)")
.attr("d","M150,7.323c-0.055-7.414-39.468-4.979-43.584-4.979c-4.115,0-104.748,4.979-104.748,4.979s95.582,4.935,108.864,5.121C123.813,12.632,150.031,11.584,150,7.323z");
var pA = "100,100"; //点A的坐标
var pB = "400,100"; //点B的坐标
var an=g.append("animateMotion")
.attr("dur","1s")
.attr("begin","0s")
.attr("fill","freeze")
.attr("repeatCount","1")
.attr("rotate","auto")
.attr("path","M" + pA + " L" + pB);
}
setInterval(function(){
drawLine();
},2000);
</script>
</html>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
已经解决 每一个动画元素都嵌套在不同的svg元素中 就可以了！！！