SVG圆在路径下移动（动画）

我必须写一个代码，圆圈应该在下面的SVG路径下

<g>
    <g>
        <path class="st0" d="M718.54,66.06L294.41,490.19c-48.89,48.89-128.09,48.95-176.91,0.13c-48.82-48.82-48.76-128.02,0.13-176.91
            s128.09-48.95,176.91-0.13"/>
    </g>
    <g>
        <path class="st0" d="M294.28,313.55l424.13,424.13c48.89,48.89,128.09,48.95,176.91,0.13c48.82-48.82,48.76-128.02-0.13-176.91
            c-48.89-48.89-128.09-48.95-176.91-0.13"/>
    </g>
</g>

<circle r="20" fill="blue">
    <animateMotion dur="5s" repeatCount="indefinite"
      path="M718.54,66.06L294.41,490.19c-48.89,48.89-128.09,48.95-176.91,0.13c-48.82-48.82-48.76-128.02,0.13-176.91
            s128.09-48.95,176.91-0.13 M294.28,313.55l424.13,424.13c48.89,48.89,128.09,48.95,176.91,0.13c48.82-48.82,48.76-128.02-0.13-176.91
            c-48.89-48.89-128.09-48.95-176.91-0.13" />

假设路径像车道，圆圈在路径下经过（像桥），它不应该出现在桥下

有什么方法可以实现它吗？
SVG掩码的工作方式有点奇怪。应用它的元素将仅在遮罩为白色且遮罩为黑色（或非白色）的情况下渲染，并将其隐藏。SVG遮罩的另一个奇怪效果是，如果正在设置元素动画并将遮罩应用于正在设置动画的元素，则遮罩将随元素一起移动

第一部分很简单，只需在掩码内添加一个与SVG本身大小相同的白色矩形，并使用较小的黑色形状进行掩码。解决移动遮罩的方法是，将遮罩应用于包裹正在设置动画的元素的标记，而不是正在设置动画的元素

如果你想让圆圈“在”一个区域下，然后“在”同一个区域上，那么你也需要在遮罩内做一些动画。在本例中，我在遮罩的rect子对象（进行遮罩的黑色部分）内使用
animateTransform
来缩小它，在圆通过“桥下”后，您也可以同样轻松地使用CSS关键帧

我强烈建议您也减少viewbox，因为与可用空间相比，您的视觉元素非常小，在我刚刚估计的示例中，但最好的方法是在Illustrator中重新渲染图形，并根据您的对象更好地裁剪艺术板

此外，如果SVG将以HTML形式内联，Illustrator生成的大多数附加标记也不需要。除了我的示例中所示的viewBox之外，您可能会丢失几乎所有的东西，因为这些其他属性大多只在SVG渲染为图像时使用，希望这能有所帮助


svg{
最大宽度：500px；
}
.st0，
.st1{
填充：无；
行程：#8ea5ae；
笔画宽度：50；
行程限制：10；
}
.st1{
笔划线头：圆形
}
.st2{
填充：无；
行程：758992；
笔画宽度：50；
行程限制：10；
}
SVG掩码的工作方式有点奇怪。应用它的元素将仅在遮罩为白色且遮罩为黑色（或非白色）的情况下渲染，并将其隐藏。SVG遮罩的另一个奇怪效果是，如果正在设置元素动画并将遮罩应用于正在设置动画的元素，则遮罩将随元素一起移动

第一部分很简单，只需在掩码内添加一个与SVG本身大小相同的白色矩形，并使用较小的黑色形状进行掩码。解决移动遮罩的方法是，将遮罩应用于包裹正在设置动画的元素的标记，而不是正在设置动画的元素

如果你想让圆圈“在”一个区域下，然后“在”同一个区域上，那么你也需要在遮罩内做一些动画。在本例中，我在遮罩的rect子对象（进行遮罩的黑色部分）内使用
animateTransform
来缩小它，在圆通过“桥下”后，您也可以同样轻松地使用CSS关键帧

我强烈建议您也减少viewbox，因为与可用空间相比，您的视觉元素非常小，在我刚刚估计的示例中，但最好的方法是在Illustrator中重新渲染图形，并根据您的对象更好地裁剪艺术板

此外，如果SVG将以HTML形式内联，Illustrator生成的大多数附加标记也不需要。除了我的示例中所示的viewBox之外，您可能会丢失几乎所有的东西，因为这些其他属性大多只在SVG渲染为图像时使用，希望这能有所帮助


svg{
最大宽度：500px；
}
.st0，
.st1{
填充：无；
行程：#8ea5ae；
笔画宽度：50；
行程限制：10；
}
.st1{
笔划线头：圆形
}
.st2{
填充：无；
行程：758992；
笔画宽度：50；
行程限制：10；
}

我将创建一个小的旋转矩形，并将其应用于蓝色圆点，以在“桥”下隐藏它们@Ruskin你能给我举个小例子吗？我试着使用面具，但它没有出现。我会创建一个小的旋转矩形，并将其应用到蓝色圆点上，以便在“桥”下隐藏它们@Ruskin你能给我举个小例子吗？我试着用面具，但它没有出现。太棒了。。。“剪辑路径”与“遮罩”的动画有相同的问题吗？是的，如果直接应用于对象，则两者都会随着对象的动画移动。但这两种方法都可以应用于父标签，以解决问题。但是，剪辑路径的工作原理与遮罩完全不同。Sarah Drasner比我解释得更好@JHeth你能解释一下animateTransform中的值是什么吗？当然，
值
和
关键时刻
共同提供对动画事件时间线的更多控制。
keyTimes
属性对应于
values
属性中的值。因此，
keyTimes
设置每个值的计时，
values
提供在每个特定关键时间应用的值序列。您可以在Thank so more@JHeth中阅读更多关于这些属性的信息。我还发布了一个与此相关的新问题，你有什么想法来解决这个问题吗？太棒了。。。“剪辑路径”与“遮罩”的动画有相同的问题吗？是的，如果直接应用于对象，则两者都会随着对象的动画移动。但这两种方法都适用于