Using Anime.JS, how do I apply an animation to specific elements/paths of an svg?-CodePudding

I've asked this question before, but I wasn't very clear with what I wanted.

I've written some code that rotates the entirety of the svg, but I don't know how to rotate the individual bodies.

<!DOCTYPE html>
<html lang="en">

<head>
  <div >

    <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/[email protected]/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>

The total svg code is much too large to paste in, so here's a snippet

<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"/>

for context, this gradient pairs to the path below.

<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)"/>

CodePudding user response：