SVG Div следовать пути - PullRequest
Новая
       11

SVG Div следовать пути

0 голосов
/ 23 сентября 2018

У меня проблемы с тем, чтобы заставить объект следовать 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>

Box floating above path

Как вы можете видеть, ящики плавают над дорожкой, почему это так?

...