优化交互式SVG JavaScript动画

Question

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

 var e = new entity(); function draw() { element = document.getElementById("canvas"); e.radius += .1; e.pos[0] += .1; e.pos[1] += .1; var insides = ""; insides += '<svg height="80%" viewBox="0 0 100 100">' + e.show() + '</svg>'; element.innerHTML = insides; } function entity() { this.pos = [0, 0]; this.radius = 1; this.show = function() { return '<circle cx="' + String(this.pos[0]) + '" cy="' + String(this.pos[1]) + '" r="' + String(this.radius) + '" />'; } } window.setInterval(draw, 60); 

 <div id="canvas" style="text-align:center;"></div> 

我想确保我没有浪费太多的资源，那么在HTML文档/ JavaScript中有什么方法可以减少诸如SVG这样的受控交互式动画的资源消耗呢？

Answer 1

每次都重新创建整个SVG效率极低。 只需更新几何属性。

 var e = new entity(); function draw() { element = document.getElementById("canvas"); e.radius += .1; e.pos[0] += .1; e.pos[1] += .1; e.show(); } function entity() { this.element = document.getElementById("mycircle"); this.pos = [0, 0]; this.radius = 1; this.show = function() { this.element.cx.baseVal.value = this.pos[0]; this.element.cy.baseVal.value = this.pos[1]; this.element.r.baseVal.value = this.radius; } } window.setInterval(draw, 60); 

 <div id="canvas" style="text-align:center;"> <svg height="80%" viewBox="0 0 100 100"> <circle id="mycircle" cx="0" cy="0" r="0" /> </svg> </div>