He escrito un código que rota la totalidad del svg, pero no sé cómo rotar los cuerpos individuales.
<!DOCTYPE html> <html lang="en"> <head> <div class="content"> <object id="demo-svg" data="./assets/test-graphic.svg" type="image/svg+xml" width="100%" height="100%"></object> <script src="https://cdn.jsdelivr.net/npm/animejs@3.0.1/lib/anime.min.js"></script> <script type="text/css"> body, html{ margin:0 } svg, g { transform-origin: unset unset; } path { transform-origin: 50% 50%; transform-box: fill-box; } </script> </div> </head> <div> <script> anime({ targets: 'path', scale: [0.1, 1], opacity: [0.1, 1], rotate: "1turn", duration: 7000 }); </script> </div> </html>El código svg total es demasiado grande para pegarlo, así que aquí hay un fragmento
<linearGradient id="linear-gradient" x1="69" y1="559.5" x2="1875" y2="559.5" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#22b226"/><stop offset="1" stop-color="#2112b5"/>para el contexto, este gradiente se empareja con la ruta a continuación.
<path d="M657,540a3,3,0,0,0-3,3v33a3,3,0,0,0,6,0V543A3,3,0,0,0,657,540Z" transform="translate(-69 -56)" fill="url(#linear-gradient)"/>Si desea apuntar a una parte individual, apunte a una parte individual. Dales una identificación o algún otro medio para referirte a ellos y vuélvete loco.
var tl = anime.timeline({ duration: 700, easing: "easeOutElastic(1, 1)", endDelay: 400, loop: true }) .add({ targets: "svg", scale: [0, 1] }) .add({ targets: ".eye", scaleY: [1, 0, 1, 0, 1], easing: "easeInOutSine" }); for (i = 0; i < 10; i++) tl.add({ targets: ".pupil", translateX: anime.random(-12, 12), translateY: anime.random(-12, 12) }); tl.add({ targets: "svg", scale: 0, easing: "easeInElastic(1, 1)", endDelay: 1000 }); <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script> <svg width="100vmin" height="100vmin" viewBox="0 0 120 120"> <circle cx="60" cy="60" r="40" stroke-width="6" stroke="#1F1F1F" fill="#AF87CC" transform-origin="60 60" /> <g class="eye" transform-origin="60 60"> <circle class="pupil" cx="60" cy="60" r="24" /> <circle cx="77" cy="43" r="10" fill="#FFFFFF" /> </g> </svg>