SVG путь следует перевернутым и повернутым + не следует пути

Я пытаюсь использовать AnimeJS, чтобы div следовал по пути.

Есть две проблемы:

  1. Объект не следует точно по пути SVG
  2. Путь, по которому он идет, выглядит повернутым и перевернутым

Я разработал решение для проблемы № 2, чтобы добавить CSS в SVG: transform: scaleX(-1) rotate(180deg); но это вызвало проблемы в дальнейшем.

jsFiddle

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 здесь

Я полагаю, это как-то связано с моим экспортом SVG? Это окно просмотра в SVG?

Спасибо, что нашли время рассмотреть мой вопрос

Источник

1 ответ

Решение

:

извините, это только частичный ответ: ваш svc преобразуется с масштабом (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) и применить их к вашей анимации

Источник
Другие вопросы по тегам