我可以创建一个遵循 svg 中现有线的圆圈吗？

Question

正如标题所暗示的，我正在尝试在 svg 中创建一个动画，其中包含一个遵循不规则路径的点/圆。我正在使用animateTransform，例如：

<animateTransform attributeName="transform"
                  attributeType="XML"
                  type="translate"
                  from="0 60 70"
                  to="360 60 70"
                  dur="10s"
                  repeatCount="definite"/>

我可以实现这个方法（在 svg 中）让圆圈跟随路径，还是我必须使用 javascript？ 如果我可以在 svg 中做到这一点，你能给我一个带有解释的基本示例吗？

Answer 1

您可以使用<animateMotion> 元素。

例子改编自MDN:

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <path id="path" fill="none" stroke="lightgrey"
    d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />

  <circle r="5" fill="red">
    <animateMotion dur="10s" repeatCount="indefinite">
      <mpath xlink:href="#path"/>
    </animateMotion>
  </circle>
</svg>