SVG 路径跟随翻转和旋转 + 不跟随路径

Question

我正在尝试使用 AnimeJS 制作 div 跟随路径。

有两个问题：

对象没有完全遵循 svg 的路径
它所遵循的路径看起来是旋转和翻转的

我解决问题 #2 的方法是将 css 添加到 SVG：transform: scaleX(-1) rotate(180deg); 但这导致了进一步的问题。

HTML:

<div class="cont">

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

  <svg...></svg>

</div>

CSS:

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

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

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

JS

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
});

jsFiddle here

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

感谢您花时间考虑我的问题

Answer 1

:

抱歉，这只是部分答案：您的 svc 使用 scale(1,-1) 进行转换（将其上下颠倒），然后 css 将 svg 缩放到 100% 屏幕大小，但后续路径仍然具有相同的大小。

改造后：

https://jsfiddle.net/eqkwj8zg/

html

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

javascript

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

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

css

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

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

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

结论：您需要找到应用于 svg 的变换（svg 变换和 dom 变换）并将它们应用于您的动画

SVG 路径跟随翻转和旋转 + 不跟随路径

SVG path follow flipped & rotated + not following path

html

javascript

css

svg

anime.js