CODEWITHSUNDEEP
htmlcsssvgcss-animations
thewebjackal
thewebjackal

Reputation: 859

SVG path animation not as expected

The moon needs to move in that path same as the one with id of trajectory around the planet. But it is moving randomly (as if it's celebrating 4/20).

Please find the attached code.

.moon {
  offset-path: path('m159.39 54.867a71.83 20.37 0 0 1-71.83 20.37 71.83 20.37 0 0 1-71.83-20.37 71.83 20.37 0 0 1 71.83-20.37 71.83 20.37 0 0 1 71.83 20.37z');
  animation: revolve 10s 1s infinite ease-in-out forwards;
}

@keyframes revolve {
  from {
    offset-distance: 0%;
  }

  to {
    offset-distance: 100%;
  }
}
<svg width="169.31" height="115.66" viewBox="0 0 169.31 115.66">
  <circle cx="87.56" cy="54.867" r="45.855" fill="#ff4141" />
  <circle class="moon" cx="18.051" cy="54.867" r="8.092" fill="#ff9900" />
  <path
        id="trajectory"
        d="m18.051 54.867c1.9043-12.055 45.047-20.455 69.073-20.601 25.048-0.15208 64.422 2.9195 72.266 20.601-6.7091 16.516-45.54 20.472-69.791 20.552-24.814 0.082685-67.739-4.5793-71.548-20.552z"
        fill="none" stroke-width=".5px" stroke="#000000" />
</svg>

Upvotes: 3

Views: 71

Answers (1)

Alexandr_TT
Alexandr_TT

Reputation: 14545

offset-path is not yet supported enough by browsers caniuse.com

To realize the moon moving along a trajectory, consider using animateMotion 

<svg width="169.31" height="115.66" viewBox="0 0 169.31 115.66">
  <circle cx="87.56" cy="54.867" r="45.855" fill="#ff4141" />
  <circle class="moon" cx="0" cy="0" r="8.092" fill="#ff9900" >
    <animateMotion begin="0s"
		 dur="12s" repeatCount="3"  fill="freeze" restart="whenNotActive" >>
	 <mpath xlink:href="#trajectory" />
	</animateMotion>
  </circle>
  <path
        id="trajectory"
        d="m18.051 54.867c1.9043-12.055 45.047-20.455 69.073-20.601 25.048-0.15208 64.422 2.9195 72.266 20.601-6.7091 16.516-45.54 20.472-69.791 20.552-24.814 0.082685-67.739-4.5793-71.548-20.552z"
        fill="none" stroke-width=".5px" stroke="#000000" />
		
</svg>

Upvotes: 5

Related Questions