Can i create a circle that follow an existing line in svg?

user_14836746 0
Viewed 19

As the title suggests, i'm trying to create an animation in svg with a point/circle that follows an irregular path. I am using the animateTransform, for example:

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

Can i implement this method (in svg) to let the circle to follow the path, or i have to use necessarily javascript? If i can do it in svg could you give me a basic example with an explanation?

svg
1 Answers

You can use the <animateMotion> element.

Example adapted from 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>

user_35589600
Related