Блог

Как следует из названия, я пытаюсь создать анимацию в svg с точкой / окружностью, которая следует нерегулярному пути. Например, я использую animateTransform:

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

Могу ли я реализовать этот метод (в svg), чтобы круг следовал по пути, или я должен обязательно использовать javascript?
Если я смогу сделать это в svg, не могли бы вы дать мне простой пример с объяснением?

Вы можете использовать <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>