Javascript SVG路径跟随翻转&；旋转+；不走正道

我试着用动画让一个div沿着一条路径走

有两个问题：

对象不完全遵循svg的路径

它所遵循的路径看起来是旋转和翻转的

我解决了问题#2的修复方法是将css添加到SVG中：

transform:scaleX（-1）rotate（180度）但它已经导致了进一步的问题


HTML:

JS



我想这与svg导出本身有关？它是svg中的视口吗

谢谢你花时间考虑我的问题
P>：

对不起，这只是部分回答：
您的svc使用比例（1，-1）（将其翻转过来）进行转换，然后css将svg缩放到100%屏幕大小，但随后的路径仍然具有相同的大小

转型后：


html

css

在这里，我通过一个svg优化器向svg提供数据，该优化器应用了转换格式（这消除了图像的翻转）
然后移除缩放。
现在，红点正确地跟随路径，我没有找到如何将动画缩放到屏幕大小

总之：您需要找到应用于svg的转换（svg转换和dom转换）并将它们应用于动画
首先，简化svg，有许多不必要的组。第二，为您尝试遵循的路径指定一个特定ID。第三，找到一种方法使其响应。在这里（顺便说一句，这与codepen不同），你会看到路径是正确的，只是没有响应（因为应用的转换值不是百分比而是像素）。很抱歉，你指出的东西不是问题，你把我已经发布的东西弄乱了，我无法使用？1.如果我的选择器是精确的，那么SVG内容为什么重要呢？（
#跟踪路径
）在
#跟踪
中只有一个路径元素。2.我特别说过我不能使用
变换：scaleX（-1）旋转（180度）所以这并不是问题的答案，而这个问题恰恰是您在JSFIDLE中更改的。这里的
AnimeJS
库显然有问题，而不是我的代码我在他们的1中发布了这个问题-当我最初编辑你的JSFIDLE时，甚至没有遵循路径，也许你还没有完成工作。2-svg内容其实并不重要，它只是简化文件结构和最小化代码。其次，这是SVG的一个问题，不是
AnimeJS
，在SVG上应用
transform:scale（1-1）
将
AnimeJS
使用的CSS转换搞得一团糟。我在Illustrator中打开了您的SVG并修复了它。这是我的更新和工作。编辑：没有看到Arrangemonk的答案..啊，非常感谢你的回答。稍后我将对其进行测试：）您使用了什么svg Optimizer？：）谢谢
<div class="cont">

  <div class="will_follow"></div>

  <svg...></svg>

</div>

.cont {
  width: 100%;
  height: 100%;
  position: relative;
}

.cont svg {
  width: 100%;
  height: 100%;
}

.will_follow {
  position: absolute;
  height: 3px;
  width: 3px;
  background-color: red;
}

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

anime({
  targets: '.will_follow',
  translateX: path('x'),
  translateY: path('y'),
  rotate: path('angle'),
  easing: 'linear',
  duration: 10000,
  loop: true
});

<div class="cont">


<div class="will_follow"></div>
<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="810" viewBox="0 0 1440 810" style="stroke-linejoin:bevel;stroke-width:0.5">
<g font-family="Times New Roman" font-size="16" style="fill:none;stroke:black">
<g style="fill:#5ccf43;stroke-width:7">
<path d="M0 810L0 0C0 0 0 0 0 0L1440 0C1440 0 1440 0 1440 0L1440 810C1440 810 1440 810 1440 810L0 810C0 810 0 810 0 810Z"/>
</g>
<g stroke-width="0.5">
<g fill="#fdf4ad">
<path d="M0 810L0 597.6 0 597.6 0 700.9C3.1 701.1 191.4 692.6 184.4 597.3 184.4 582.2 196.7 569.9 211.9 569.9L295.3 569.9 295.3 413.5 209.8 413.5C194.6 413.5 182.3 401.2 182.3 386.1L182.3 209.9C182.3 194.8 194.6 182.5 209.8 182.5L1151.9 182.5C1167.1 182.5 1179.3 194.8 1179.3 209.9L1179.3 377.4C1179.3 392.6 1167.1 404.9 1151.9 404.9L1040.5 404.9 1039.8 491.4C1039.7 506.4 1027.4 518.6 1012.4 518.6L793.4 518.6C778.3 518.6 766.1 506.4 766 491.4L765.2 359.3 545.7 359.3 545.7 627.6 930.6 627.6C945.7 627.6 958 639.9 958 655L958 700.5 1440 700.5 1440 755.3 930.6 755.3C915.4 755.3 903.1 743.1 903.1 727.9L903.1 682.4 518.3 682.4C503.2 682.4 490.9 670.1 490.9 655L490.9 331.8C490.9 316.7 503.2 304.4 518.3 304.4L792.5 304.4C807.6 304.4 819.8 316.6 819.9 331.7L820.7 463.8 985.1 463.8 985.8 377.3C985.9 362.2 998.2 350 1013.3 350L1124.5 350 1124.5 237.3 237.2 237.3 237.2 358.7 322.8 358.7C337.9 358.7 350.2 371 350.2 386.1L350.2 597.3C350.2 612.4 337.9 624.7 322.8 624.7L239.3 624.7C237 656.8 232.7 693.2 239.3 722.8 249.4 772 57.3 781 58.3 810L0 810Z"/>
</g>
</g>
<path id="followme" d="M0 785.3C75.3 700 167.9 747.1 204 645L216.4 597.3 322.1 597.3 322.1 386.1 209.1 386.1 209.1 209.9 1151.3 209.9 1151.3 377.4 1012.6 377.4 1011.7 491.2 792.7 491.2 791.9 333.2 520.3 333.2 520.3 655 929.9 655 929.9 727.9 1440 727.9" style="fill:none;stroke-linejoin:round;stroke-width:0.8;stroke:#f00"/>
</g>
</svg>
</div>

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

anime({
  targets: '.will_follow',
  translateX: path('x'),
  translateY: path('y'),
  rotate: path('angle'),
  easing: 'linear',
  duration: 10000,
  loop: true
});

.cont {
  width: 100%;
  height: 100%;
  position: relative;
}

.will_follow {
  height: 10px;
  width: 10px;
  background-color: red;
}