优化交互式SVG JavaScript动画

我正在尝试使用JavaScript在web浏览器中设置SVG的动画。我目前的方法是使用innerHTML：

var e=新实体（）；
函数绘图（）{
元素=document.getElementById（“画布”）；
e、 半径+=.1；
e、 位置[0]+=.1；e.pos[1]+=.1；
var insides=“”；
内部+=''+e.显示（）+''；
element.innerHTML=内部；
}
函数实体（）{
this.pos=[0,0]；
这个半径=1；
this.show=函数（）{
返回“”；
}
}
窗口设置间隔（绘图，60）
每次重新创建整个SVG效率极低。只需更新几何体属性


var e=新实体（）；
函数绘图（）{
元素=document.getElementById（“画布”）；
e、 半径+=.1；
e、 位置[0]+=.1；e.pos[1]+=.1；
e、 show（）；
}
函数实体（）{
this.element=document.getElementById（“mycircle”）；
this.pos=[0,0]；
这个半径=1；
this.show=函数（）{
this.element.cx.baseVal.value=this.pos[0]；
this.element.cy.baseVal.value=this.pos[1]；
this.element.r.baseVal.value=this.radius；
}
}
窗口设置间隔（绘图，60）

SMIL将更加高效。我正试图避免使用SMIL，因为它的兼容性有限。它的兼容性非常好，因为如果您使用fakeSmile polyfill，它可以在所有浏览器上运行。好的，我将研究fakeSmile，谢谢！加载DOM后，您认为向画布添加形状的最佳方法是什么？使用
document.createElements（）
。查看此处的其他问题，了解如何执行此操作。有很多这样的例子。这是一个常见问题。此外，编辑多个实体的位置值会在每次编辑后触发重新绘制，还是仅在脚本运行完成后才触发重新绘制？这通常会在浏览器下次空闲时发生。在javascript循环中增加coords不能作为动画使用。您需要在每个超时、间隔或动画帧上执行此操作。