使用 CSS 转换为 SVG 元素的位置设置动画

Question

我想使用 CSS 转换来为 SVG 元素的位置设置动画。

但是 - 看起来这适用于某些 SVG 元素（例如，rect），但不适用于其他元素（例如文本）：

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>