svg div遵循路径

Question

在使对象遵循svgpath时遇到问题。

<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
  <defs>
    <bx:grid x="68.703" y="182.252" width="100" height="100"/>
  </defs>
  <path style="stroke: rgb(54, 133, 63); fill: rgb(54, 133, 63);" d="M -2.124 114.098 C 115.715 259.528 327.483 129.213 500 114.704"/>
  <rect width="0.954" height="0.954" style="fill: rgb(216, 216, 216);"/>
  <rect x="-31.297" y="-2.748" width="552.848" height="117.846" style="fill: rgb(54, 133, 63);"/>
</svg>

这是我的路。

我使用anime.js完成动画。

    <script>

var path = anime.path('path');

var easings = ['linear', 'easeInCubic', 'easeOutCubic', 'easeInOutCubic'];

var motionPath = anime({
  targets: '.square',
  translateX: path('x'),
  translateY: path('y'),
  rotate: path('angle'),
  easing: function (el, i) {
    return easings[i];
  },
  duration: 10000,
  loop: true
});
    </script>

如您所见，这些盒子漂浮在路径上方，为什么呢？