Search code examples
cssanimationsvgsvg-animate

How can i rotate the Path near the given path in SVG

So i have a problem with SVG, I am trying to simply animate a path on another path, but there is a big offset in between the paths

Here is my code for SVG

  <svg width="500" height="500" viewbox="0 0 132 132">
      <path
        id="path1"
        d="m 101.4187,109.72533 a 56.065571,56.065571 0 0 1 -78.831564,-8.28098 56.065571,56.065571 0 0 1 8.234505,-78.836434 56.065571,56.065571 0 0 1 78.841269,8.188024 56.065571,56.065571 0 0 1 -8.14154,78.84609"
        stroke="red"
        stroke-width="2"
        fill="transparent"
      ></path>
      
      
 <linearGradient id="myGradient">
        <stop offset="0%" style=" stop-color:#000080; stop-opacity:1" />
        <stop offset="100%"  style="stop-color:#00ccff; stop-opacity:0.38502708" />
      </linearGradient>



<!-- I want this 👇 element to go closer to the path above 👆 -->

  <path
      fill="url('#myGradient')"
      d="m 92.777301,95.941024 c -0.06085,0.01464 5.686103,1.71384 5.642996,1.66846 -0.04311,-0.04538 1.358822,5.781226 1.376568,5.721206 0.01775,-0.06 -4.327281,4.06739 -4.266426,4.05275 0.06085,-0.0146 -5.686104,-1.71384 -5.642996,-1.66846 0.04311,0.0454 -1.358822,-5.781231 -1.376569,-5.721209 -0.01775,0.06002 4.327281,-4.067389 4.266427,-4.052747 z"
    >
    <animateMotion dur="5s" repeatCount="indefinite" rotate="auto">
      <mpath xlink:href="#path1"/>
  </path>

Plese use developer tools Element tab, to see, the animation.

Here is what i am expecting this to be enter image description here

Solution

  • You need to translate back your element to place it at the top/left corner then you can apply the path animation to it.

    You can do this with a g element

    <svg width="500" height="500" viewbox="0 0 132 132">
      <path
        id="path1"
        d="m 101.4187,109.72533 a 56.065571,56.065571 0 0 1 -78.831564,-8.28098 56.065571,56.065571 0 0 1 8.234505,-78.836434 56.065571,56.065571 0 0 1 78.841269,8.188024 56.065571,56.065571 0 0 1 -8.14154,78.84609"
        stroke="red"
        stroke-width="2"
        fill="transparent"
      ></path>
      
      
 <linearGradient id="myGradient">
        <stop offset="0%" style=" stop-color:#000080; stop-opacity:1" />
        <stop offset="100%"  style="stop-color:#00ccff; stop-opacity:0.38502708" />
      </linearGradient>



<!-- I want this 👇 element to go closer to the path above 👆 -->

  <g transform="translate(-100,-100)"><path
      fill="url('#myGradient')"
      d="m 92.777301,95.941024 c -0.06085,0.01464 5.686103,1.71384 5.642996,1.66846 -0.04311,-0.04538 1.358822,5.781226 1.376568,5.721206 0.01775,-0.06 -4.327281,4.06739 -4.266426,4.05275 0.06085,-0.0146 -5.686104,-1.71384 -5.642996,-1.66846 0.04311,0.0454 -1.358822,-5.781231 -1.376569,-5.721209 -0.01775,0.06002 4.327281,-4.067389 4.266427,-4.052747 z"
    />
    <animateMotion dur="5s" repeatCount="indefinite" rotate="auto">
      <mpath xlink:href="#path1"/></animateMotion>
  </g>
  <!-- Below the element with no animation to understand  -->
  <g transform="translate(-95,-100)"><path
      fill="url('#myGradient')"
      d="m 92.777301,95.941024 c -0.06085,0.01464 5.686103,1.71384 5.642996,1.66846 -0.04311,-0.04538 1.358822,5.781226 1.376568,5.721206 0.01775,-0.06 -4.327281,4.06739 -4.266426,4.05275 0.06085,-0.0146 -5.686104,-1.71384 -5.642996,-1.66846 0.04311,0.0454 -1.358822,-5.781231 -1.376569,-5.721209 -0.01775,0.06002 4.327281,-4.067389 4.266427,-4.052747 z"
    />
  </g>