svg text使用css transition过渡位移不生效求解答?

Question

<svg width="500" height="500">
    <rect class="a" x="10" y="10" width="100" height="100" fill="red"></rect>
    <text class="a" x="10" y="30">aaa</text>
</svg>

.a {
    transition: all 1s;
}

举例代码如上所示，我想修改这两个svg元素的x，y的值，然后这两个元素平滑的过渡移动到新的位置。rect元素可以显示过渡动画，但是text元素却没有过渡动画。
求解其原因？
应该怎么才能实现让text也有位移过渡动画？

Answer 1

rect元素的坐标支持CSS写法，而text却不支持

/*以下支持*/
rect{
 x: 10;
 y: 10;
}
/*以下不支持*/
text{
 x: 10;
 y: 10;
}

所以，通过 CSS transition text 没有过渡动画

建议直接用普通的 html 元素来实现