优化交互式 SVG JavaScript 动画

Question

我正在尝试使用 JavaScript 在网络浏览器中为 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>