Xml SVG在重复时跳过/抖动_Xml_Animation_Svg_Vector Graphics

Xml SVG在重复时跳过/抖动

xml animation svg

Xml SVG在重复时跳过/抖动,xml,animation,svg,vector-graphics,Xml,Animation,Svg,Vector Graphics,我制作了一个简单的SVG，它的元素每5秒重复一次，但是在我查看过的每个浏览器和操作系统中，每次重复时（一旦5条虚线退出帧），它似乎会短暂地向后跳几个像素。这有点微妙，但如果你仔细看，它就在那里下面是代码，这是一个代码笔：这是因为你移动虚线的距离是223.6，（sqrt（100^2+200^2）），而不是虚线图案长度的倍数（44）。因此，当动画到达终点并重复时，会出现跳跃如果调整dasharray使其更接近长度的偶数部分，则跳转将消失 stroke-dasharray="22.36, 22.

我制作了一个简单的SVG，它的元素每5秒重复一次，但是在我查看过的每个浏览器和操作系统中，每次重复时（一旦5条虚线退出帧），它似乎会短暂地向后跳几个像素。这有点微妙，但如果你仔细看，它就在那里

下面是代码，这是一个代码笔：

这是因为你移动虚线的距离是223.6，（sqrt（100^2+200^2）），而不是虚线图案长度的倍数（44）。因此，当动画到达终点并重复时，会出现跳跃

如果调整dasharray使其更接近长度的偶数部分，则跳转将消失

stroke-dasharray="22.36, 22.36"

顺便说一下，有很多更简单的方法来制作动画。不要移动线条并用剪贴画隐藏溢出，只需设置

笔划dashoffset

的动画即可。见下文

太棒了，这简直让我发疯。谢谢你的简化！

stroke-dasharray="22.36, 22.36"