CODEWITHSUNDEEP
javascripthtmlcsssvg
zach_21
zach_21

Reputation: 321

How to get an svg to follow a path?

I am trying to get an svg to follow a path. But the svg circle just stays in one place and does not follow the path. 

.LineSvg {
  fill: none;
  stroke: $blue;
  position: absolute;
  margin-top: -2px;
  left: 700px;
}
<svg xmlns="http://www.w3.org/2000/svg" width="1167.85" height="841.719" viewBox="0 0 1167.85 841.719" className={styles.LineSvg}>

  <path fill="none" id="wire" d="M-4766.667-2093.939s292-358.061,476-223.394S-4269.333-1874.667-3952-2028s221.818-437.333,9.576-338.667-154.546,321.212,151.515,272.727,193.333-429.818,17.576-487.394S-4220-2402.667-4429.333-2432s-317.333-102.667-257.333-232,429.091-48.121,474.545-163.273" transform="translate(4767.054 2827.456)" />
  <circle cx="123.2" cy="646" r="11.7" fill="#63c6be" >

    <animateMotion
      dur="2.2s"
    />
    <mpath xlinkHref="#wire"></mpath>
    <animateMotion />
  </circle>
</svg>

It should start at the beginning of the path (line) and move to the top of the line.

Upvotes: 1

Views: 123

Answers (1)

Robert Longson
Robert Longson

Reputation: 123985

There are a number of syntactical errors in the markup that prevent animation. When these are fixed the animation takes place off the screen because the path's transform is ignored by the mpath element.

  • The syntax is fixed below and I've adjusted the viewBox so the animation is visible.
  • I've removed the non-functional transform on the path element.
  • I've also added a fill="freeze" otherwise the circle disappears at the end as the path's displacement is so large.
  • Finally I've made the circle bigger so you can still see it in the larger viewBox.

.LineSvg{
    fill: none;
    stroke: $blue;
    position: absolute;
    margin-top: -2px;
    left: 700px;
}
<svg xmlns="http://www.w3.org/2000/svg" width="1167.85" height="841.719" viewBox="-5000 -3000 5000 5000" className={styles.LineSvg} >

          <path fill="none" id="wire" d="M-4766.667-2093.939s292-358.061,476-223.394S-4269.333-1874.667-3952-2028s221.818-437.333,9.576-338.667-154.546,321.212,151.515,272.727,193.333-429.818,17.576-487.394S-4220-2402.667-4429.333-2432s-317.333-102.667-257.333-232,429.091-48.121,474.545-163.273" />
          <circle cx="123.2" cy="646" r="111.7" fill="#63c6be" >

            <animateMotion
              dur="2.2s" fill="freeze"
            >
            <mpath xlink:href="#wire"></mpath>
            </animateMotion>
          </circle>

        </svg>

Upvotes: 2

Related Questions