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

情到深处人孤独
  • 5
新手上路,请多包涵
<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也有位移过渡动画?

回复
阅读 368
1 个回答
✓ 已被采纳

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

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏