SVG путь следует перевернутым и повернутым + не следует пути - PullRequest
Новая
       41

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

0 голосов
/ 11 февраля 2019

Я пытаюсь использовать 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 Ответ

0 голосов
/ 11 февраля 2019

:

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

...