SVG CSS过渡属性

Question

我可以将SVG元素的x或y属性设置为过渡属性吗？如果没有，那么职位变更过渡的替代解决方案有哪些？

svg text { transition: x 1s ease-in; }

x以上是我要设置的过渡属性。

Answer 1

这是您正在寻找的东西吗？

我想您要在代码段下方实现animation，因此需要添加3秒的时间。

svg {
  border: 3px solid #eee;
  display: block;
  margin: 1em auto;
}

<svg width="500" height="100">
  <circle id="orange-circle" r="30" cx="50" cy="50" fill="orange" />
  
  <animate 
           xlink:href="#orange-circle"
           attributeName="cx"
           from="50"
           to="450" 
           dur="3s"
           begin="click"
           fill="freeze" />
</svg>