javascript - 使用 CSS 过渡动画 SVG 元素的位置

Question

我想使用 CSS 过渡动画来设置 SVG 元素的位置。

但是 - 看起来这适用于某些 SVG 元素(例如，矩形)，但不适用于其他元素(例如文本):

document.querySelector("button").onclick = function() {
  var x = Math.random() * 450;
  document.querySelector("rect").setAttributeNS(null, "x", x);
  document.querySelector("text").setAttributeNS(null, "x", x);
}

rect {
  transition: all 700ms ease-in-out;
}

text {
  transition: all 700ms ease-in-out;
}

<svg width="500" height="100">
  <rect x="100" y="10" width="30" height="30" fill="blue" stroke="none"/>
  <text x="100" y="80" fill="red" stroke="none">Hello</text>
</svg>
<br>
<button>animate</button>

我做错了什么吗？有一个更好的方法吗？ (理想情况下，不使用 JavaScript 或像 GreenSock 这样的库)。

Answer 1

您可以改用翻译:

document.querySelector("button").onclick = function() {
  var x = Math.random() * 250;
  document.querySelector("rect").setAttributeNS(null, "transform","translate("+x+")");
  document.querySelector("text").setAttributeNS(null, "transform","translate("+x+")");
}

rect {
  transition: all 700ms ease-in-out;
}

text {
  transition: all 700ms ease-in-out;
}

<svg width="500" height="100">
  <rect x="100" y="10" width="30" height="30" fill="blue" stroke="none"/>
  <text x="100" y="80" fill="red" stroke="none">Hello</text>
</svg>
<br>
<button>animate</button>