Estoy tratando de hacer una animación simple usando traducir X en un segmento de mi svg (mientras paso el mouse sobre el elemento). Este es mi código:
<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>Mientras se desplaza, el punto se mueve en el eje Y y desaparece. ¿Cómo abordaré esto? Además, ¿hay alguna manera de que pueda usar gsap para animar esto considerando que este svg está dentro de una clase css en una imagen de fondo? Gracias
el problema que tiene es que seleccionó el elemento incorrecto, seleccione el círculo en sí, no el grupo al que pertenece, su elemento se llama #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>