Animation of SVG groups

Hello,

I am trying to use anime.js to animate the position of an SVG group along an SVG path. I can animate a member element of the group along the path without any issues, however whenever I attempt to do the same thing with the SVG group, nothing happens.

I know that SVG groups do not support x and y properties, the way an SVG rectangle does and cx and cy properties the way an ellipse does.

It there a simple way to go about doing this?

The code below shows what I am trying to do.

Animate #group1 to move along #path600.

<head>
   <style>
      body { 
         background-color: #070724; 
      }

      svg, g {
         transform-origin: unset unset;
      } 

      svg #rect101 {
         transform-origin: 0% 0%;
         transform-box: fill-box;  
      }

   </style>

</head>
<body>
   <div id="div1">

   <svg
      xmlns:dc="http://purl.org/dc/elements/1.1/"
      xmlns:cc="http://creativecommons.org/ns#"
      xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
      xmlns:svg="http://www.w3.org/2000/svg"
      xmlns="http://www.w3.org/2000/svg"
      id="svg15010"
      version="1.1"
      viewBox="0 0 142.18739 119.20222"
      height="119.20222mm"
      width="142.18739mm">
     <defs
        id="defs15004" />
     <metadata
        id="metadata15007">
       <rdf:RDF>
         <cc:Work
            rdf:about="">
           <dc:format>image/svg+xml</dc:format>
           <dc:type
              rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
           <dc:title></dc:title>
         </cc:Work>
       </rdf:RDF>
     </metadata>
     <g
        transform="translate(-25.054468,-82.121803)"
        id="layer1">
       <rect
          ry="2.5390606"
          y="82.52272"
          x="25.054468"
          height="6.1471992"
          width="13.363476"
          id="rect15597"
          style="opacity:1;fill:#b3b3b3;fill-opacity:1;stroke:none;stroke-width:1.36500001;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
       <rect
          ry="2.5390606"
          y="82.121803"
          x="153.87837"
          height="6.1471992"
          width="13.363476"
          id="rect15597-9"
          style="opacity:1;fill:#b3b3b3;fill-opacity:1;stroke:none;stroke-width:1.36500001;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
       <rect
          ry="2.5390606"
          y="195.17682"
          x="154.68019"
          height="6.1471992"
          width="13.363476"
          id="rect15597-7"
          style="opacity:1;fill:#b3b3b3;fill-opacity:1;stroke:none;stroke-width:1.36500001;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
       <rect
          ry="2.5390606"
          y="195.17682"
          x="25.054468"
          height="6.1471992"
          width="13.363476"
          id="rect15597-3"
          style="opacity:1;fill:#b3b3b3;fill-opacity:1;stroke:none;stroke-width:1.36500001;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
       <path
          id="path600"
          d="m 79.577451,138.78295 50.781209,-0.53453"
          style="fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
       <g
          id="group1">
         <rect
            style="opacity:1;fill:#b3b3b3;fill-opacity:1;stroke:none;stroke-width:1.36500001;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
            id="rect101"
            width="10.156241"
            height="10.156241"
            x="63.541279"
            y="129.69579"
            ry="2.5390606" />
         <ellipse
            style="opacity:1;fill:#b3b3b3;fill-opacity:1;stroke:none;stroke-width:1.36500001;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
            id="path15717"
            cx="70.089378"
            cy="126.75582"
            rx="3.6081362"
            ry="2.9399626" />
       </g>
     </g>
   </svg>

   </div>

   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>

   <script>

      document.addEventListener("DOMContentLoaded", function(event) {
         var rotator0 = anime.path('#path600');

         function animation0(){

            var animation0 = anime({
               targets: ['#group1'],
               translateX: rotator0('x'),
               translateY: rotator0('y'),

               duration: 4000,
               easing: 'linear',
            });

         }

         animation0();

      });

   </script>

</body>
</html>

Thanks.

juliangarnier / anime

Animation of SVG groups #823