Animation 动画SVG中的文本元素以断断续续的运动方式移动

基本几何SVG元素可以定位在像素的分数处，但显然不像示例脚本所示的

text

元素那样。虽然

rect

元素的运动是平滑的，但是

text

元素的运动更像是口吃，这可能是因为位置被舍入到下一个完整像素，因此文本不会因为抗锯齿问题而显得模糊。但是在移动文本的上下文中，这种舍入没有意义，而是导致了口吃运动。这只是猜测，也许我错了

有没有人有办法让

text

元素的运动像

rect

元素一样平滑？多谢各位

你好，世界！
函数moveElements（）{
document.getElementsByTagName（“rect”）[0].setAttribute（“x”，p）；
document.getElementsByTagName（“rect”）[0].setAttribute（“y”，p）；
document.getElementsByTagName（“text”）[0].setAttribute（“x”，p+125）；
document.getElementsByTagName（“text”）[0].setAttribute（“y”，p+38）；
p+=0.1；
}
p=0；
设置间隔（移动元素，20）；

由于这种行为只发生在文本的基线平行于像素网格时，或者换句话说：完全水平，因此可以通过将文本旋转一小部分来解决这个问题，该部分肉眼几乎看不见，但足够大，可以脱离像素网格，就像这样（不太优雅，更像是一个黑客，但对我来说很有用）：

你好，世界！
函数moveElements（）{
document.getElementsByTagName（“rect”）[0].setAttribute（“x”，p）；
document.getElementsByTagName（“rect”）[0].setAttribute（“y”，p）；
document.getElementsByTagName（“text”）[0].setAttribute（“x”，p+125）；
document.getElementsByTagName（“text”）[0].setAttribute（“y”，p+38）；
document.getElementsByTagName（“text”）[0].setAttribute（“变换”、“旋转（.05”+（p+125）++”+（p+25）+”）；
p+=0.1；
}
p=0；
设置间隔（移动元素，20）；