Problem While animating an svg point using tranform translate X-CodePudding

I'm trying to make a simple animation using translate X on a segment of my svg (while hover on the element). This is my code:

<html>
<style>
  .big-dot:hover {
    transform: translateX(20px);
    animation-duration: 1s;
    transition: all 1.5s linear;
    display: inline-block;
  }
</style>

<body>
  <svg id="Component_31_4" data-name="Component 31 – 4" xmlns="http://www.w3.org/2000/svg" width="42.534"
    height="49.111" viewBox="0 0 42.534 49.111">

    <g id="icon_navigation_chevron_right_24px" data-name="icon/navigation/chevron_right_24px"
      transform="translate(0 8.696)">
      <rect id="Boundary" width="24" height="24" transform="translate(13.423 11.72)" fill="none" />
      <path id="_Color" data-name=" ↳Color" d="M3.957,0,2.371,1.81,17.634,16.86,2.733,31.7,3.957,33.72,20.794,16.86Z"
        transform="translate(-2.371)" fill="#181e41" />
    </g>
    <g id="Group_3463" data-name="Group 3463" transform="translate(-780.577 -5591.11)">
      <g class='big-dot' id="Component_3_29" data-name="Component 3 – 29"
        transform="translate(801.374 5626.535) rotate(-90)">
        <path id="Path_277" data-name="Path 277"
          d="M0,0A7.686,7.686,0,0,0,7.685-7.687,7.685,7.685,0,0,0,0-15.371,7.685,7.685,0,0,0-7.685-7.687,7.686,7.686,0,0,0,0,0"
          transform="translate(16.303 16.303) rotate(-45)" fill="#e05037" />
      </g>
      <g id="Component_3_30" data-name="Component 3 – 30" transform="translate(803.226 5640.222) rotate(180)">
        <path id="Path_277-2" data-name="Path 277"
          d="M-4.382-8.765a3.3,3.3,0,0,0,3.3-3.3,3.3,3.3,0,0,0-3.3-3.3,3.3,3.3,0,0,0-3.3,3.3,3.3,3.3,0,0,0,3.3,3.3"
          transform="translate(16.303 49.875) rotate(-45)" fill="#e05037" />
        <g id="Group_296" data-name="Group 296" transform="translate(9.908 6.811) rotate(-45)">
          <path id="Path_275" data-name="Path 275"
            d="M-1.325-2.649A2.769,2.769,0,0,0,1.445-5.419,2.77,2.77,0,0,0-1.325-8.188,2.77,2.77,0,0,0-4.094-5.419,2.769,2.769,0,0,0-1.325-2.649"
            fill="#377caa" />
        </g>
      </g>
    </g>
  </svg>
</body>

</html>

While hovering, the dot is doing a move on the Y axis instead and disappear. How Shall i tackle this? Also, is there a way I could use gsap to animate this considering this svg is inside a css class on a backround image ? Thanks

CodePudding user response：

the issue you're having is that you've selected the wrong element, please select the circle itself, not the group it belongs to, your element is named #Path_277.

<style>
  #Path_277:hover {
    transform: translateX(20px);
    animation-duration: 1s;
    transition: all 1.5s linear;
    display: inline-block;
  }
</style>

<body>
  <svg id="Component_31_4" data-name="Component 31 – 4" xmlns="http://www.w3.org/2000/svg" width="42.534"
    height="49.111" viewBox="0 0 42.534 49.111">

    <g id="icon_navigation_chevron_right_24px" data-name="icon/navigation/chevron_right_24px"
      transform="translate(0 8.696)">
      <rect id="Boundary" width="24" height="24" transform="translate(13.423 11.72)" fill="none" />
      <path id="_Color" data-name=" ↳Color" d="M3.957,0,2.371,1.81,17.634,16.86,2.733,31.7,3.957,33.72,20.794,16.86Z"
        transform="translate(-2.371)" fill="#181e41" />
    </g>
    <g id="Group_3463" data-name="Group 3463" transform="translate(-780.577 -5591.11)">
      <g class='big-dot' id="Component_3_29" data-name="Component 3 – 29"
        transform="translate(801.374 5626.535) rotate(-90)">
        <path id="Path_277" data-name="Path 277"
          d="M0,0A7.686,7.686,0,0,0,7.685-7.687,7.685,7.685,0,0,0,0-15.371,7.685,7.685,0,0,0-7.685-7.687,7.686,7.686,0,0,0,0,0"
          transform="translate(16.303 16.303) rotate(-45)" fill="#e05037" />
      </g>
      <g id="Component_3_30" data-name="Component 3 – 30" transform="translate(803.226 5640.222) rotate(180)">
        <path id="Path_277-2" data-name="Path 277"
          d="M-4.382-8.765a3.3,3.3,0,0,0,3.3-3.3,3.3,3.3,0,0,0-3.3-3.3,3.3,3.3,0,0,0-3.3,3.3,3.3,3.3,0,0,0,3.3,3.3"
          transform="translate(16.303 49.875) rotate(-45)" fill="#e05037" />
        <g id="Group_296" data-name="Group 296" transform="translate(9.908 6.811) rotate(-45)">
          <path id="Path_275" data-name="Path 275"
            d="M-1.325-2.649A2.769,2.769,0,0,0,1.445-5.419,2.77,2.77,0,0,0-1.325-8.188,2.77,2.77,0,0,0-4.094-5.419,2.769,2.769,0,0,0-1.325-2.649"
            fill="#377caa" />
        </g>
      </g>
    </g>
  </svg>
</body>