Javascript 如何将CSS转换与<；文本>；元素？

我正在使用svg制作一个图形，希望使事情看起来更漂亮。
在我的图表中，我有一个

，里面有

，圆圈会四处移动。
我使用了过渡使我的圆圈移动得很漂亮，但不能将其与

标记一起使用
当圆圈移动时，文本会从圆圈中消失。

我能做什么使文本跟随圆圈元素

普朗克：

var x=true；
var测试=函数（）{
var circleEl=document.getElementById（'circle'）；
var textEl=document.getElementById（'text'）；
if（x）{
circleEl.setAttribute（'cx'，'400'）
textEl.setAttribute（'x'，'397'）
x=假
}否则{
circleEl.setAttribute（'cx'，'50'）
textEl.setAttribute（'x'，'47'）
x=真
}
}

。圆过渡{
过渡性质：全部；
过渡时间：3s；
过渡时间函数：线性；
}
.文本转换{
过渡性质：全部；
过渡时间：3s；
过渡时间函数：线性；
}

1.
试试看在使用CSS并为其设置动画时，您需要谨慎一点。例如，您的问题描述仅适用于Chrome。在Firefox中，圆圈和文本都会跳转

最好只使用CSS样式属性，在本例中为
transform
。此外，可以将元素组合在一起，以便只需要一个动画：


var x=true；
var测试=函数（）{
var groupEl=document.getElementById（'group'）；
if（x）{
setAttribute（'style'，'transform:translate（350px）'
x=假
}否则{
setAttribute（'style'，'transform:translate（0px）'
x=真
}
}
。组转换{
过渡性质：全部；
过渡时间：3s；
过渡时间函数：线性；
}

1.
试试看表明IE11和Edge不支持SVG元素上的CSS转换。

我的解决方法是同时使用CSS Transform和Transform属性，这样所有浏览器都会显示圆圈和文本的正确位置（IE根本没有定位它），但只有动画在IE/Edge中不起作用


var x=true；
var测试=函数（）{
var circleEl=document.getElementById（'circle'）；
var textEl=document.getElementById（'text'）；
if（x）{
circleEl.setAttribute（'style'，'transform:translate（350px，0px）'
setAttribute（'style'，'transform:translate（350px，0px）'
circleEl.setAttribute（'transform'，'translate（350，0）'
setAttribute（'transform'，'translate（350，0）'
x=假
}否则{
circleEl.setAttribute（'style'，'transform:translate（0px，0px）'
setAttribute（'style'，'transform:translate（0px，0px）'
circleEl.setAttribute（'transform'、'translate（0,0'））
setAttribute（'transform'、'translate（0,0'））
x=真
}
}
。圆过渡{
过渡性质：全部；
过渡时间：3s；
过渡时间函数：线性；
}
.文本转换{
过渡性质：全部；
过渡时间：3s；
过渡时间函数：线性；
}

1.
试试看使用javascript来动画你的
文本
，而不是css？似乎是这样。说IE11和Edge不支持SVG元素上的CSS转换，使用presentation属性让您回到原点。下一个退路是使用一个单独的svg元素，该元素仅由圆圈+文本组成，并在html文档中整体移动它。