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

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

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

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的库）。

最佳答案

您可以改用翻译：

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>