8

У меня есть изображение автомобиля, нарисованное средствами SVG:

<svg id="svg" viewBox="0 0 1500 1000">

  <!--Автомобиль-->
  <g id="car">
  <!--Зеркала-->
<path d="M371 88l-31-77c-3-6-9-11-17-11h-23l35 88zm0 142h-36l-35 88h23c8 0 14-5 17-11z" fill="red" />
  <!--Кузов-->
    <path d="M492 224l13-30c9-22 9-48 0-70l-13-30a88 88 0 0 0-88-53L256 53 104 40c-36-3-70 17-86 49l-3 7c-20 40-20 86 0 126l3 7a88 88 0 0 0 86 49l152-13 148 12c38 3 73-18 88-53z" fill="orangered" />
    <!--Тень кузова-->
    <path d="M396 277c66-50 95-134 74-214 9 9 17 19 22 31l13 30c9 22 9 48 0 70l-13 30a88 88 0 0 1-88 53z" fill="red" />
    <!--Переднее стекло-->
    <path d="M369 91l-2-3c-3-5-10-8-16-7l-77 7v142l77 7c6 1 13-2 16-7l2-3c27-41 27-95 0-136z" fill="white" />
    <!--Тень переднего стекла-->
    <path d="M370 92c26 41 26 94-1 135l-2 3c-3 5-10 8-16 7l-59-6c44-33 72-84 78-139z" fill="lightgray" />
    <!--Заднее стекло-->
    <path d="M150 88v142l-41 6c-7 2-14-2-18-8l-9-18c-18-32-18-70 0-102l9-18c4-6 11-10 18-8z" fill="white" />
    <!--Тень заднего стекла-->
    <path d="M91 228l-5-9c31-35 53-76 64-121v132l-41 6c-7 2-14-2-18-8z" fill="lightgray" />
    <!--Фары-->
    <path d="M411 72l53 36-10 15-53-36zm43 124l10 15-54 35-10-15z" fill="yellow" />
  </g>

</svg>

Есть также изображение карты города, по автомобильным дорогам которого я хотел был воспроизвести анимацию движения автомобиля:

введите сюда описание изображения

У меня получилось совместить в одном SVG карту города и изображение автомобиля. Кроме этого, с помощью команды анимации <animateTransform> и свойства translate(x,y) мне удалось воспроизвести анимацию перемещения автомобиля по дороге.

введите сюда описание изображения

Анимация начинается после клика по карте

<svg id="svg" viewBox="0 0 1600 900">

  <g id="map" x="0" y="0">
    <image href="https://i.imgur.com/kb3KgeW.jpg">
    </image>
  </g>

  <!--Автомобиль-->
  <g transform="translate(10,456)">
  <g transform="scale(0.08)">
  <!--Зеркала-->
<path d="M371 88l-31-77c-3-6-9-11-17-11h-23l35 88zm0 142h-36l-35 88h23c8 0 14-5 17-11z" fill="red" />
  <!--Кузов-->
    <path d="M492 224l13-30c9-22 9-48 0-70l-13-30a88 88 0 0 0-88-53L256 53 104 40c-36-3-70 17-86 49l-3 7c-20 40-20 86 0 126l3 7a88 88 0 0 0 86 49l152-13 148 12c38 3 73-18 88-53z" fill="orangered" />
    <!--Тень кузова-->
    <path d="M396 277c66-50 95-134 74-214 9 9 17 19 22 31l13 30c9 22 9 48 0 70l-13 30a88 88 0 0 1-88 53z" fill="red" />
    <!--Переднее стекло-->
    <path d="M369 91l-2-3c-3-5-10-8-16-7l-77 7v142l77 7c6 1 13-2 16-7l2-3c27-41 27-95 0-136z" fill="white" />
    <!--Тень переднего стекла-->
    <path d="M370 92c26 41 26 94-1 135l-2 3c-3 5-10 8-16 7l-59-6c44-33 72-84 78-139z" fill="lightgray" />
    <!--Заднее стекло-->
    <path d="M150 88v142l-41 6c-7 2-14-2-18-8l-9-18c-18-32-18-70 0-102l9-18c4-6 11-10 18-8z" fill="white" />
    <!--Тень заднего стекла-->
    <path d="M91 228l-5-9c31-35 53-76 64-121v132l-41 6c-7 2-14-2-18-8z" fill="lightgray" />
    <!--Фары-->
    <path d="M411 72l53 36-10 15-53-36zm43 124l10 15-54 35-10-15z" fill="yellow" />
    </g>
    <animateTransform attributeName="transform" type="translate"
   begin="svg.click" dur="15s" values="10,456; 1510,456; 10,456" additive="replace" calcMode="linear" repeatCount="indefinite" fill="freeze" restart="whenNotActive" />
  </g>

</svg>

Однако, такая анимация позволят перемещать автомобиль только по прямой одного участка дороги, и это совсем не тот результат, который мне хотелось бы получить.

Вопрос: Как мне воспроизвести анимацию движения автомобиля по всей дороге, которая изображена на карте города? И желательно, если это возможно, учесть следующий момент. Размер изображения карты города 1600x900. И если у пользователя размер экрана меньше, то соответственно в моем примере и размер всего SVG элемента уменьшается, подстраиваясь под размер окна браузера. Так вот, как установить фиксированные размеры для SVG элемента (например 600x300) при том, чтобы размеры всех внутренних его элементов (карта и автомобиль) не уменьшались, и при движении автомобиля карта в след за ним передвигалась внутри SVG элемента?

1
  • 2
    Отличный вопрос и ответ! Наверняка ты захочешь добавить и другие объекты анимации для оживления. Облака, воздушный шар, трактор на дальнем плане. Немного усложнить анимацию, остановки автомобиля перед пешеходными переходами. Пешеходов. Можно взять для примера тут и тут 5 мая 2021 в 12:58

4 ответа 4

9

Анимация движения автомобиля при скроллинге

Взят за основу код @Sevastopol' (немного доработан для прокрутки).

Добавлен скрипт, реализующий движение автомобиля.

function MoveScroll() {
  var scrollY = window.scrollY || window.pageYOffset;
  var maxScrollY = document.documentElement.scrollHeight - window.innerHeight;
  var path = document.getElementById("mPath");
  // Рассчитать расстояние по пути, на котором машина должна быть для текущего количества прокрутки
  var pathLen = path.getTotalLength();
  var dist = pathLen * scrollY / maxScrollY;
  var pos = path.getPointAtLength(dist);
  // Вычислить положение немного впереди машины (или позади, если мы в конце), чтобы мы могли рассчитать угол автомобиля.
  if (dist + 1 <= pathLen) {
    var posAhead = path.getPointAtLength(dist + 1);
    var angle = Math.atan2(posAhead.y - pos.y, posAhead.x - pos.x);
  } else {
    var posBehind = path.getPointAtLength(dist - 1);
    var angle = Math.atan2(pos.y - posBehind.y, pos.x - posBehind.x);
  }
  // Поместите автомобиль в "pos", повернутый на "angle".
  var car = document.getElementById("car");
  car.setAttribute("transform", "translate(" + pos.x + "," + pos.y + ") rotate(" + rad2deg(angle) + ")");
}

function rad2deg(rad) {
  return 180 * rad / Math.PI;
}

// Передвигать автомобиль всякий раз, когда есть событие прокрутки
window.addEventListener("scroll", MoveScroll);

// Первоначально установить автомобиль
MoveScroll();
body {
  min-height: 30000px;
}
.container {
width:100vw;
height:100vw;
}
svg {
  position: fixed;
}
<div class="container">
<svg id="svg" viewBox="0 80 1840 1035" preserveAspectRatio="xMinYMin meet">

  <!--Карта-->
  <g id="map" x="0" y="0" transform="scale(1) translate(0,0)">
    <image href="https://i.imgur.com/uTmJYO7.png">
    </image>
  </g>

 

<!--Путь-->
<path id="mPath" fill="none" stroke="none" stroke-width="1px" d="M-99.9 458.3C405 455.9 909.9 453.5 1168.1 451.5c258.3-2 269.8-3.7 284-9 14.2-5.3 31-14.2 44.5-25.7 13.5-11.5 24-25.7 30.9-40 6.9-14.3 10.3-28.6 12-52.9 1.7-24.3 1.7-59-0.7-82.6-2.4-23.5-7.2-36.5-14.1-48.6-6.8-12.1-15.9-23.8-27.6-34.1-11.7-10.3-26-19.2-41-25.4-15.1-6.2-30.4-9.6-69.2-10.9-38.8-1.4-100.8-0.8-138.2 3.2-37.4 4-50.2 11.4-61.6 19.2-11.5 7.9-21.6 16.3-31 28.1-9.4 11.9-17.9 27.2-23.1 42.3-5.2 15.1-7 29.8-6.3 113.4 0.7 83.6 3.9 235.9 2.4 318.2-1.5 82.3-7.7 94.4-13.2 104.4-5.5 9.9-10.6 17.8-19.2 27.4-8.6 9.6-20.7 20.9-34.1 29.3-13.4 8.4-27.9 13.8-167.6 16.5-139.7 2.7-404.5 2.7-542.3 1.2-137.8-1.5-149-4.5-161.3-10.4-12.4-5.9-26.1-14.7-37.6-26.8-11.5-12.2-20.6-27.7-26.5-41.9-5.9-14.1-8.5-26.9-9.7-101.5-1.2-74.6-1-211 0.4-283.5 1.4-72.5 4-81.1 8.9-91.2 4.9-10.2 12.1-21.9 21.1-32.7 9.1-10.8 20-20.5 31.3-27.6 11.3-7.1 22.8-11.5 34.8-14.2 12-2.8 24.7-4 94.9-4.5 70.2-0.5 198-0.3 264.3 0.6 66.3 0.9 70.7 2.5 77.6 5 6.9 2.5 16.1 5.9 25.9 12 9.9 6.1 20.4 14.9 29.5 25 9.1 10.2 16.7 21.7 22 33.8 5.4 12.1 8.6 24.6 10.4 37.6 1.8 13 2.2 25.9 3.7 36.8 1.5 10.9 4.1 19.4 8.6 29.5 4.5 10.1 10.9 21.6 19.3 32 8.5 10.4 19 19.5 31 27.3 12 7.8 25.3 14.2 41.6 18 16.3 3.8 35.6 5.1 134.6 5.1 99 0 277.8-1.4 371.1-3.6 93.3-2.2 101-5.3 111.8-10.8 10.8-5.5 24.9-13.3 37.2-23.8 12.3-10.5 23.2-24 30.2-38.2 7-14.2 10.2-28.7 11.6-53.5 1.5-24.7 1.3-59.4-1.1-83-2.4-23.5-7-35.9-13.4-47.9-6.4-12-14.6-23.5-26.1-33.7-11.6-10.2-26.5-18.9-41.1-25.2-14.6-6.3-28.7-10.1-67.8-11.7-39.1-1.6-103.1-1-139.8 2.2-36.7 3.2-46.1 9-57.4 17.1-11.4 8.1-24.7 18.4-35.6 31.5-10.9 13-19.2 28.4-23.8 38.3-4.6 9.9-5.4 14.1-6.3 44.4-0.9 30.3-1.9 86.8-3 118.9-1.1 32.1-2.3 39.9-4 45.1-1.7 5.2-3.9 7.8-5.9 9.9-2 2.1-3.7 3.7-6.7 5.5-3 1.8-7.2 3.8-11.3 5.2-4 1.4-7.8 2.2-14 3.2-6.2 1-14.8 2.2-53.1 2.5-38.3 0.3-106.3-0.3-144.8-2-38.5-1.7-47.5-4.5-58.5-9.7-11-5.2-23.9-12.7-34.6-22-10.8-9.3-19.3-20.2-26-32.9-6.7-12.7-11.5-27-14.2-41.9-2.7-14.9-3.3-30.6-5.6-44.1-2.3-13.5-6.3-24.8-11.5-35.2-5.2-10.4-11.6-19.7-19.9-28.8-8.4-9.1-18.7-17.8-30.7-24.9-12-7.1-25.5-12.5-37.1-16.1-11.6-3.6-21.1-5.4-92.3-6.5-71.2-1.1-204.4-1.6-274.9 0-70.5 1.6-78.4 5.2-87.8 10.2-9.4 5-20.2 11.5-29.7 19-9.5 7.5-17.7 16.1-25 26.1-7.4 10-14 21.3-18.6 33.2-4.7 11.9-7.5 24.2-8.9 34.8-1.4 10.6-1.4 19.3-1.1 88.5 0.3 69.2 0.9 198.8 2.2 266.1 1.3 67.3 3.2 72.2 6.6 81.1 3.4 8.9 8.2 21.7 15.8 33.5 7.5 11.8 17.7 22.6 28 30.8 10.3 8.3 20.6 14.1 31.5 18.7 10.9 4.6 22.2 8 159.5 9.8 137.3 1.8 400.5 2 535.8 1.3 135.2-0.7 142.4-2.3 152.8-6.4 10.5-4.1 23.9-10.6 35.7-18.7 11.8-8 21.9-17.5 30.1-28.2 8.3-10.7 14.8-22.5 20.1-34.3 5.3-11.7 9.4-23.3 10.2-69.3 0.8-46-1.8-124.7-9.8-169.4-8-44.8-20.8-51.7-32.9-56.1-12.2-4.4-23.4-6.1-32.1-6.8-8.7-0.7-14.9-0.4-20.5-0.1-5.5 0.3-10.4 0.7-200.4 0.5-190-0.2-565.2-1.1-940.5-2" />

  <g id="map" x="0" y="0" transform="scale(1) translate(0,0)">
    <image href="https://i.imgur.com/WaWS3m2.png">
    </image>
  </g>
   <!--Автомобиль-->
  <g id="car" >
  <!--Зеркала-->
<path transform="scale(0.1)" d="M371 88l-31-77c-3-6-9-11-17-11h-23l35 88zm0 142h-36l-35 88h23c8 0 14-5 17-11z" fill="red" />
  <!--Кузов-->
    <path transform="scale(0.1)" d="M492 224l13-30c9-22 9-48 0-70l-13-30a88 88 0 0 0-88-53L256 53 104 40c-36-3-70 17-86 49l-3 7c-20 40-20 86 0 126l3 7a88 88 0 0 0 86 49l152-13 148 12c38 3 73-18 88-53z" fill="orangered" />
    <!--Тень кузова-->
    <path  transform="scale(0.1)" d="M396 277c66-50 95-134 74-214 9 9 17 19 22 31l13 30c9 22 9 48 0 70l-13 30a88 88 0 0 1-88 53z" fill="red" />
    <!--Переднее стекло-->
    <path transform="scale(0.1)" d="M369 91l-2-3c-3-5-10-8-16-7l-77 7v142l77 7c6 1 13-2 16-7l2-3c27-41 27-95 0-136z" fill="white" />
    <!--Тень переднего стекла-->
    <path transform="scale(0.1)" d="M370 92c26 41 26 94-1 135l-2 3c-3 5-10 8-16 7l-59-6c44-33 72-84 78-139z" fill="lightgray" />
    <!--Заднее стекло-->
    <path transform="scale(0.1)" d="M150 88v142l-41 6c-7 2-14-2-18-8l-9-18c-18-32-18-70 0-102l9-18c4-6 11-10 18-8z" fill="white" />
    <!--Тень заднего стекла-->
    <path transform="scale(0.1)" d="M91 228l-5-9c31-35 53-76 64-121v132l-41 6c-7 2-14-2-18-8z" fill="lightgray" />
    <!--Фары-->
    <path transform="scale(0.1)" d="M411 72l53 36-10 15-53-36zm43 124l10 15-54 35-10-15z" fill="yellow" />
     </g> 
    <path id="car1" d="M-15,-10 L15,0 L -15,10 z" fill="yellow" stroke="red" stroke-width="7.06"/>
</svg>
</div>

Update

По комментарию @Sevastopol':

А здесь же всё зависит от разрешения экрана. У меня, например, 1600х900. И если раскрываю окошко на весь экран, то нижняя часть карты обрезается. А если у кого-то, допустим, широкоформат, то там тем более половина карты будет обрезаться. Вот здесь как-то нужно это учитывать

Решение:

Чтобы устранить этот эффект обрезания изображения, необходимо уменьшить картинку на 15% и немного поднять её вверх. Это решается с помощью изменения параметров viewBox, как известно из теории SVG, при увеличении viewBox изображение уменьшается.

Было - viewBox="0 0 1600 900" (1600 * 1.15 = 1840)
Стало - viewBox="0 80 1840 1035"

У меня широкоформатный дисплей. Проверял в Firefox, Chrome

Разрешения дисплея, при которых проводилась проверка:

1920 x 1080
1600 x 900
1600 x 1050
1680 x 1050
1600 x 1200
1440 x 700
1400 x 1050
1366 x 768
1280 x 1024
1280 x 960
1280 x 800
1280 x 720
1152 x 864
800 x 600

Если у кого-то при других разрешениях дисплея будет всё-таки наблюдаться обрезка изображения снизу, то просьба присылать не скриншоты, а технические характеристики ваших гаджетов и какой используется браузер, так как FF и webkit (blink) браузеры работают с масштабированием немного по разному

4
  • @Sevastopol' можно решить анимацией параметров атрибутов x , y у viewBox 5 мая 2021 в 14:47
  • @Sevastopol' посмотрел, у меня карта показана полностью, нет невидимых зон, так что двигать некуда. А вот если условие из вопроса соблюдать при уменьшении разрешения дисплея, то наверное нужны будут подвижки. 5 мая 2021 в 14:52
  • @Sevastopol' а если добавить относительные единицы, связанные с размером браузера? Сейчас попробую 5 мая 2021 в 15:11
  • На самом деле не видно вот смотри сам 6 мая 2021 в 1:58
7

Отвечая на первую часть вопроса:

Как мне воспроизвести анимацию движения автомобиля по всей дороге, которая изображена на карте города?

Воспроизвести анимацию движения элемента (автомобиля) по произвольной траектории (автомобильной дороги) возможно с помощью элемента <animateMotion> и атрибута path.

<animateMotion> — анимационный элемент, который позволит нам двигать автомобиль по заданной траектории;

path — атрибут, с помощью которого мы зададим траекторию движения;

Чтобы получить нужную траекторию движения (путь) для автомобиля, необходимо загрузить изображение карты в любой векторный редактор и нарисовать кривую.

введите сюда описание изображения

Выбираем инструмент кривые Безье и режим BSpline. Этот режим позволит сделать углы (повороты дороги) автоматически сглаженными.

введите сюда описание изображения

Сохраняем файл в формате SVG, открываем его в любом текстовом редакторе, и копируем его path.

Теперь нам остается только запустить анимацию движения автомобиля с помощью анимационного элемента <animateMotion>:

<animateMotion begin="btn.click" dur="100s" rotate="auto" repeatCount="indefinite" fill="remove" restart="whenNotActive">
<mpath xlink:href="#mPath"/>
</animateMotion>

begin="btn.click" — анимация начинается после клика по кнопке;

dur="100s" — продолжительность анимации;

rotate="auto" — ориентация элемента относительно траектории движения. Значение auto указывает, что автомобиль будет поворачиваться с течением времени на угол направления (по касательному вектору направления) траектории движения.

<mpath xlink:href="#mPath"/> — ссылаемся на внешний путь, где #mPath и есть полученная из векторного редактора траектория движения (path).

Результат:

body {margin: 0;}
<svg viewBox="0 0 1600 900" preserveAspectRatio="xMinYMin meet">

<!--Карта-->
<g x="0" y="0"><image href="https://i.imgur.com/uTmJYO7.png"></image></g>

  <!--Автомобиль 1-->
  <g transform="scale(0.08)">
  <!--Зеркала-->
<path d="M371 88l-31-77c-3-6-9-11-17-11h-23l35 88zm0 142h-36l-35 88h23c8 0 14-5 17-11z" fill="red" />
  <!--Кузов-->
    <path d="M492 224l13-30c9-22 9-48 0-70l-13-30a88 88 0 0 0-88-53L256 53 104 40c-36-3-70 17-86 49l-3 7c-20 40-20 86 0 126l3 7a88 88 0 0 0 86 49l152-13 148 12c38 3 73-18 88-53z" fill="orangered" />
    <!--Тень кузова-->
    <path d="M396 277c66-50 95-134 74-214 9 9 17 19 22 31l13 30c9 22 9 48 0 70l-13 30a88 88 0 0 1-88 53z" fill="red" />
    <!--Переднее стекло-->
    <path d="M369 91l-2-3c-3-5-10-8-16-7l-77 7v142l77 7c6 1 13-2 16-7l2-3c27-41 27-95 0-136z" fill="white" />
    <!--Тень переднего стекла-->
    <path d="M370 92c26 41 26 94-1 135l-2 3c-3 5-10 8-16 7l-59-6c44-33 72-84 78-139z" fill="lightgray" />
    <!--Заднее стекло-->
    <path d="M150 88v142l-41 6c-7 2-14-2-18-8l-9-18c-18-32-18-70 0-102l9-18c4-6 11-10 18-8z" fill="white" />
    <!--Тень заднего стекла-->
    <path d="M91 228l-5-9c31-35 53-76 64-121v132l-41 6c-7 2-14-2-18-8z" fill="lightgray" />
    <!--Фары-->
    <path d="M411 72l53 36-10 15-53-36zm43 124l10 15-54 35-10-15z" fill="yellow" />
    <!--Анимация движения автомобиля-->
    <animateMotion begin="btn.click" dur="100s" rotate="auto" repeatCount="indefinite" fill="remove" restart="whenNotActive"><mpath xlink:href="#mPath"/></animateMotion>
  </g>

  <!--Автомобиль 2-->
  <g transform="scale(0.08)">
  <!--Зеркала-->
<path d="M371 88l-31-77c-3-6-9-11-17-11h-23l35 88zm0 142h-36l-35 88h23c8 0 14-5 17-11z" fill="royalblue" />
  <!--Кузов-->
    <path d="M492 224l13-30c9-22 9-48 0-70l-13-30a88 88 0 0 0-88-53L256 53 104 40c-36-3-70 17-86 49l-3 7c-20 40-20 86 0 126l3 7a88 88 0 0 0 86 49l152-13 148 12c38 3 73-18 88-53z" fill="deepskyblue" />
    <!--Тень кузова-->
    <path d="M396 277c66-50 95-134 74-214 9 9 17 19 22 31l13 30c9 22 9 48 0 70l-13 30a88 88 0 0 1-88 53z" fill="royalblue" />
    <!--Переднее стекло-->
    <path d="M369 91l-2-3c-3-5-10-8-16-7l-77 7v142l77 7c6 1 13-2 16-7l2-3c27-41 27-95 0-136z" fill="white" />
    <!--Тень переднего стекла-->
    <path d="M370 92c26 41 26 94-1 135l-2 3c-3 5-10 8-16 7l-59-6c44-33 72-84 78-139z" fill="lightgray" />
    <!--Заднее стекло-->
    <path d="M150 88v142l-41 6c-7 2-14-2-18-8l-9-18c-18-32-18-70 0-102l9-18c4-6 11-10 18-8z" fill="white" />
    <!--Тень заднего стекла-->
    <path d="M91 228l-5-9c31-35 53-76 64-121v132l-41 6c-7 2-14-2-18-8z" fill="lightgray" />
    <!--Фары-->
    <path d="M411 72l53 36-10 15-53-36zm43 124l10 15-54 35-10-15z" fill="yellow" />
    <!--Анимация движения автомобиля-->
    <animateMotion begin="btn.click+10s" dur="100s" rotate="auto" repeatCount="indefinite" fill="remove" restart="whenNotActive"><mpath xlink:href="#mPath"/></animateMotion>
  </g>

<!--Путь-->
<path id="mPath" fill="none" stroke="none" stroke-width="1px" d="m -99.912826,454.69419 c 498.479776,0.34705 996.938426,0.69408 1254.330826,-0.30051 257.3924,-0.99458 273.6767,-3.33043 291.0715,-9.38751 17.3947,-6.05707 35.8969,-15.83426 50.2985,-27.75511 14.4016,-11.92086 24.8412,-26.17493 31.7214,-40.43382 6.8803,-14.25888 10.2705,-28.61732 11.9657,-52.9476 1.6952,-24.33028 1.6952,-59.02985 -0.665,-82.57453 -2.3601,-23.54467 -7.2118,-36.4826 -14.0545,-48.5995 -6.8426,-12.1169 -15.8916,-23.77997 -27.6297,-34.09556 -11.7382,-10.31559 -25.9532,-19.19999 -41.0056,-25.40324 -15.0524,-6.20326 -30.4169,-9.55194 -69.2062,-10.94805 -38.7892,-1.39612 -100.8097,-0.79785 -138.2027,3.19068 -37.393,3.98852 -50.156,11.36713 -61.6233,19.24462 -11.4672,7.87749 -21.6378,16.25326 -31.0111,28.11953 -9.3733,11.86626 -17.9485,27.22184 -23.1335,42.27897 -5.1851,15.05713 -6.9799,29.81442 -6.2904,113.36717 0.6894,83.55275 3.8628,235.89442 2.2774,319.15363 -1.5855,83.25922 -7.9297,97.43345 -14.299,109.29926 -6.3694,11.86581 -12.7638,21.42331 -23.0297,31.61914 -10.2658,10.19583 -24.4026,21.02956 -40.3192,28.01169 -15.9167,6.98212 -33.6132,10.11232 -169.8369,11.61614 -136.2237,1.50383 -392.55774,1.38025 -524.9492,-0.008 -132.39146,-1.38796 -144.02444,-4.04208 -158.08642,-10.35566 -14.06198,-6.31358 -30.55297,-16.28707 -43.38561,-29.05138 -12.83265,-12.76431 -22.0061,-28.31929 -27.8855,-42.45928 -5.87939,-14.13999 -8.47979,-26.94196 -10.27203,-100.47023 -1.79223,-73.52828 -2.78387,-207.81323 -1.5203,-280.96829 1.26357,-73.15505 4.82173,-85.30523 10.94535,-97.89062 6.12361,-12.58539 14.89094,-25.87328 24.09756,-35.98099 9.20662,-10.10771 18.85146,-17.03406 28.86704,-23.1262 10.01558,-6.09214 20.60426,-11.45249 33.1277,-14.56594 12.52344,-3.11344 27.38721,-4.18568 92.42629,-4.80853 65.03907,-0.62285 180.25337,-0.79638 244.61406,0.006 64.36068,0.80223 77.9292,2.58817 90.52235,5.62701 12.59314,3.03884 24.38891,7.38863 35.53484,13.93766 11.14593,6.54902 21.71533,15.32362 30.78917,25.49463 9.07384,10.17102 16.6519,21.73754 22.03623,33.80299 5.38432,12.06546 8.57509,24.6291 10.37282,37.59181 1.79773,12.96271 2.19054,25.92537 3.68643,36.7943 1.49589,10.86892 4.08838,19.4441 8.5757,29.51527 4.48731,10.07117 10.86884,21.63769 19.34479,32.00785 8.47595,10.37015 19.04536,19.5436 31.01117,27.32113 11.96581,7.77753 25.32714,14.15907 41.63439,17.99503 16.30724,3.83597 35.55912,5.12668 132.37865,5.88991 96.81952,0.76322 271.19562,0.99895 363.72492,-0.95859 92.5293,-1.95754 103.2022,-6.10792 116.269,-12.35557 13.0668,-6.24764 28.5262,-14.59181 41.6012,-25.39608 13.075,-10.80427 23.9224,-24.26307 30.9229,-38.41774 7.0005,-14.15467 10.1501,-28.72145 11.6459,-53.45059 1.4958,-24.72913 1.2963,-59.4287 -1.0966,-82.96109 -2.3929,-23.53239 -6.9797,-35.89659 -13.3612,-47.86236 -6.3816,-11.96577 -14.5579,-23.53227 -26.1246,-33.70334 -11.5667,-10.17107 -26.5235,-18.9457 -41.0818,-25.22786 -14.5582,-6.28215 -28.7173,-10.0712 -67.8057,-11.66678 -39.0884,-1.59557 -103.1031,-0.9973 -139.7981,2.19349 -36.6949,3.1908 -46.0678,8.97407 -57.4354,17.05099 -11.3675,8.07692 -24.7288,18.4469 -35.6394,31.48734 -10.9106,13.04044 -19.2032,28.44083 -23.79,38.3127 -4.5868,9.87188 -5.3844,14.05976 -5.8745,43.90786 -0.4901,29.8481 -0.6728,85.35273 -1.5828,117.18944 -0.9101,31.83672 -2.5492,40.01144 -4.9396,46.08821 -2.3903,6.07678 -5.5431,10.08439 -9.1661,13.34313 -3.6231,3.25875 -7.8497,5.85292 -11.9456,7.63137 -4.0959,1.77846 -8.2226,2.80486 -12.35,3.70703 -4.1274,0.90217 -8.3511,1.70123 -15.2602,2.61208 -6.9091,0.91084 -16.5712,1.94335 -53.1744,1.82245 -36.60324,-0.1209 -100.41744,-1.39855 -136.74852,-3.43195 -36.33109,-2.0334 -45.30512,-4.82531 -56.34804,-10.05377 -11.04293,-5.22846 -23.85678,-12.71964 -34.62607,-21.99289 -10.76929,-9.27325 -19.34447,-20.2415 -26.02555,-32.9052 -6.68108,-12.6637 -11.46723,-27.02214 -14.15584,-41.87982 -2.68862,-14.85768 -3.29455,-30.61179 -5.59874,-44.10428 -2.30418,-13.49249 -6.27078,-24.79729 -11.45576,-35.1676 -5.18498,-10.37032 -11.56651,-19.74319 -19.94239,-28.81732 -8.37588,-9.07412 -18.74587,-17.84873 -30.58262,-25.23162 -11.83675,-7.38288 -25.35099,-13.46843 -40.08835,-16.96742 -14.73735,-3.49898 -31.13295,-4.602 -80.75177,-4.78528 -49.61881,-0.18329 -132.51834,0.5518 -199.72565,-0.25935 -67.20732,-0.81114 -118.78604,-3.16801 -153.94897,5.08408 -35.16294,8.2521 -54.07322,27.27838 -64.86088,39.296 -10.78765,12.01762 -13.83676,17.45635 -17.22491,23.55107 -3.38815,6.09471 -7.14328,12.89528 -10.19929,22.47814 -3.056,9.58286 -5.41282,21.94707 -6.80875,32.51677 -1.39594,10.56971 -1.83105,19.34449 -1.74944,88.54645 0.0816,69.20196 0.68489,199.91165 1.69203,266.816 1.00715,66.90436 2.42785,72.16943 5.23543,80.66389 2.80758,8.49446 7.10255,20.49956 14.36313,31.45413 7.26057,10.95458 18.22217,21.95816 26.06904,29.12803 7.84687,7.16986 12.89749,10.82574 18.00742,14.04215 5.10993,3.21642 10.29249,6.00112 17.54427,9.17883 7.25178,3.1777 16.59225,6.75905 45.78552,8.31721 29.19328,1.55816 78.23957,1.0936 206.24642,0.65955 128.00685,-0.43404 334.97203,-0.83757 447.01488,-1.35205 112.0429,-0.51447 128.9464,-1.13233 144.5305,-4.74511 15.5841,-3.61277 29.1142,-10.05001 40.9913,-18.04602 11.877,-7.99601 21.9376,-17.47271 30.2138,-28.14209 8.2763,-10.66938 14.7677,-22.53068 19.5022,-34.21388 4.7344,-11.6832 7.7117,-23.18764 9.1948,-67.39179 1.4832,-44.20414 1.4721,-119.33427 -15.404,-164.24151 -16.876,-44.90725 -49.0978,-55.5475 -72.5317,-61.30461 -23.4339,-5.7571 -37.3143,-6.37873 -54.02673,-6.64213 -16.71246,-0.2634 -36.24847,-0.16841 -53.64187,-0.38373 -17.3934,-0.21532 -32.63605,-0.74092 -205.4531,-1.02106 -172.81705,-0.28014 -503.18795,-0.31471 -833.56907,-0.34928" />

<!--Карта-->
<g x="0" y="0"><image href="https://i.imgur.com/WaWS3m2.png"></image></g>

<!--Кнопка-->
<g id="btn" cursor="pointer">
  <circle cx="1224" cy="40" r="8" fill="green"></circle> 
  <text x="1240" y="48" fill="darkred" font-size="1.8rem">Старт</text>
</g>

</svg>

0
5

Анимация светофора, пешеходов

введите сюда описание изображения

Добавлен пешеходный переход к школе, с работающим светофором.

При загорании зелёного на светофоре, начинается обычная суета на пешеходном переходе.

Анимация рассчитана, таким образом, чтобы пересечение дороги пешеходами было возможно, только на зелёный цвет.

Функция скроллинга анимации машины осталась. Крутите колесико.

function MoveScroll() {
  var scrollY = window.scrollY || window.pageYOffset;
  var maxScrollY = document.documentElement.scrollHeight - window.innerHeight;
  var path = document.getElementById("mPath");
  // Рассчитать расстояние по пути, на котором машина должна быть для текущего количества прокрутки
  var pathLen = path.getTotalLength();
  var dist = pathLen * scrollY / maxScrollY;
  var pos = path.getPointAtLength(dist);
  // Вычислить положение немного впереди машины (или позади, если мы в конце), чтобы мы могли рассчитать угол автомобиля.
  if (dist + 1 <= pathLen) {
    var posAhead = path.getPointAtLength(dist + 1);
    var angle = Math.atan2(posAhead.y - pos.y, posAhead.x - pos.x);
  } else {
    var posBehind = path.getPointAtLength(dist - 1);
    var angle = Math.atan2(pos.y - posBehind.y, pos.x - posBehind.x);
  }
  // Поместите автомобиль в "pos", повернутый на "angle".
  var car = document.getElementById("car");
  car.setAttribute("transform", "translate(" + pos.x + "," + pos.y + ") rotate(" + rad2deg(angle) + ")");
}

function rad2deg(rad) {
  return 180 * rad / Math.PI;
}

// Передвигать автомобиль всякий раз, когда есть событие прокрутки
window.addEventListener("scroll", MoveScroll);

// Первоначально установить автомобиль
MoveScroll();
body {
  min-height: 30000px;
}
.container {
width:100vw;
height:100vw;
}
svg {
  position: fixed;
}
<div class="container">
<svg id="svg1" viewBox="0 80 1840 1035" preserveAspectRatio="xMinYMin meet">
<defs>

   <path id="walk1"
   d="m343 268 34-10 50-9-33-86 22-14 7-21 8-3 13 18 34-25 47 65 22-19"  />
  <g id="Man" transform="translate(0,0) scale(1,-1)">
    <path   fill="none">
         <animate
          attributeName="d"
          begin="0.1s"
          dur="0.3s"
          repeatCount="indefinite"
          values="M-3,0 0,10 3,0 M0,10 0,16 l 4,-5 M0,16 l-4,-5 M0,16 c4,4 -4,4 0,0;
                  M 0,0 0,10 0,0 M0,10 0,16 l 0,-5 M0,16 l 0,-5 M0,16 c4,4 -4,4 0,0;
                  M-3,0 0,10 3,0 M0,10 0,16 l 4,-5 M0,16 l-4,-5 M0,16 c4,4 -4,4 0,0"/>
    </path> 
      </g>  
        <!-- Трасса в школу через пешеходный переход  -->
 <path id="child"  fill="none" stroke="none" d="m328 893 1-212M344 864" /> 
       <!-- Трасса в палатку через пешеходный переход  -->
   <path id="home1"  fill="none" stroke="none" d="m 344.35582,863.69183 c 0,0 -34.63139,-111.56426 0,-145.53606 29.52729,-28.96492 84.99455,-11.19516 124.06352,2.38584 15.72518,5.46632 24.12207,24.52029 39.76395,30.2206 78.91988,28.76045 173.36704,37.53827 258.46569,18.29141" /> 
    <path id="child2"  fill="none" stroke="none" d="m309 874c0 0-13-111 2-157 2-6 14 0 17-5 6-8 1-30 1-30" />  
    <!-- Трасса2 из палатки через пешеходный переход  -->
    <path id="home2" d="m 876.39749,779.39226 c 0,0 -307.5863,30.55405 -455.69489,-3.18112 -25.43694,-5.79386 -49.02287,-47.7976 -70.77983,-33.40172 -33.85116,22.39822 4.77167,121.67769 4.77167,121.67769" style="fill:none;stroke-width:2;stroke:#e02e2e"/>  
     <!-- Трасса из школы через пешеходный переход     -->
      <path id="back" d="m329 682c0 0-23 32-25 41-13 54 14 143 14 143" style="fill:none;stroke-width:2;stroke:#da3434"/>
    
  </defs>
  <!--Карта-->
  <g id="map" x="0" y="0" transform="scale(1) translate(0,0)">
    <image href="https://i.imgur.com/uTmJYO7.png">
    </image>
  </g>

 

<!--Путь-->
<path id="mPath" fill="none" stroke="none" stroke-width="1px" d="M-99.9 458.3C405 455.9 909.9 453.5 1168.1 451.5c258.3-2 269.8-3.7 284-9 14.2-5.3 31-14.2 44.5-25.7 13.5-11.5 24-25.7 30.9-40 6.9-14.3 10.3-28.6 12-52.9 1.7-24.3 1.7-59-0.7-82.6-2.4-23.5-7.2-36.5-14.1-48.6-6.8-12.1-15.9-23.8-27.6-34.1-11.7-10.3-26-19.2-41-25.4-15.1-6.2-30.4-9.6-69.2-10.9-38.8-1.4-100.8-0.8-138.2 3.2-37.4 4-50.2 11.4-61.6 19.2-11.5 7.9-21.6 16.3-31 28.1-9.4 11.9-17.9 27.2-23.1 42.3-5.2 15.1-7 29.8-6.3 113.4 0.7 83.6 3.9 235.9 2.4 318.2-1.5 82.3-7.7 94.4-13.2 104.4-5.5 9.9-10.6 17.8-19.2 27.4-8.6 9.6-20.7 20.9-34.1 29.3-13.4 8.4-27.9 13.8-167.6 16.5-139.7 2.7-404.5 2.7-542.3 1.2-137.8-1.5-149-4.5-161.3-10.4-12.4-5.9-26.1-14.7-37.6-26.8-11.5-12.2-20.6-27.7-26.5-41.9-5.9-14.1-8.5-26.9-9.7-101.5-1.2-74.6-1-211 0.4-283.5 1.4-72.5 4-81.1 8.9-91.2 4.9-10.2 12.1-21.9 21.1-32.7 9.1-10.8 20-20.5 31.3-27.6 11.3-7.1 22.8-11.5 34.8-14.2 12-2.8 24.7-4 94.9-4.5 70.2-0.5 198-0.3 264.3 0.6 66.3 0.9 70.7 2.5 77.6 5 6.9 2.5 16.1 5.9 25.9 12 9.9 6.1 20.4 14.9 29.5 25 9.1 10.2 16.7 21.7 22 33.8 5.4 12.1 8.6 24.6 10.4 37.6 1.8 13 2.2 25.9 3.7 36.8 1.5 10.9 4.1 19.4 8.6 29.5 4.5 10.1 10.9 21.6 19.3 32 8.5 10.4 19 19.5 31 27.3 12 7.8 25.3 14.2 41.6 18 16.3 3.8 35.6 5.1 134.6 5.1 99 0 277.8-1.4 371.1-3.6 93.3-2.2 101-5.3 111.8-10.8 10.8-5.5 24.9-13.3 37.2-23.8 12.3-10.5 23.2-24 30.2-38.2 7-14.2 10.2-28.7 11.6-53.5 1.5-24.7 1.3-59.4-1.1-83-2.4-23.5-7-35.9-13.4-47.9-6.4-12-14.6-23.5-26.1-33.7-11.6-10.2-26.5-18.9-41.1-25.2-14.6-6.3-28.7-10.1-67.8-11.7-39.1-1.6-103.1-1-139.8 2.2-36.7 3.2-46.1 9-57.4 17.1-11.4 8.1-24.7 18.4-35.6 31.5-10.9 13-19.2 28.4-23.8 38.3-4.6 9.9-5.4 14.1-6.3 44.4-0.9 30.3-1.9 86.8-3 118.9-1.1 32.1-2.3 39.9-4 45.1-1.7 5.2-3.9 7.8-5.9 9.9-2 2.1-3.7 3.7-6.7 5.5-3 1.8-7.2 3.8-11.3 5.2-4 1.4-7.8 2.2-14 3.2-6.2 1-14.8 2.2-53.1 2.5-38.3 0.3-106.3-0.3-144.8-2-38.5-1.7-47.5-4.5-58.5-9.7-11-5.2-23.9-12.7-34.6-22-10.8-9.3-19.3-20.2-26-32.9-6.7-12.7-11.5-27-14.2-41.9-2.7-14.9-3.3-30.6-5.6-44.1-2.3-13.5-6.3-24.8-11.5-35.2-5.2-10.4-11.6-19.7-19.9-28.8-8.4-9.1-18.7-17.8-30.7-24.9-12-7.1-25.5-12.5-37.1-16.1-11.6-3.6-21.1-5.4-92.3-6.5-71.2-1.1-204.4-1.6-274.9 0-70.5 1.6-78.4 5.2-87.8 10.2-9.4 5-20.2 11.5-29.7 19-9.5 7.5-17.7 16.1-25 26.1-7.4 10-14 21.3-18.6 33.2-4.7 11.9-7.5 24.2-8.9 34.8-1.4 10.6-1.4 19.3-1.1 88.5 0.3 69.2 0.9 198.8 2.2 266.1 1.3 67.3 3.2 72.2 6.6 81.1 3.4 8.9 8.2 21.7 15.8 33.5 7.5 11.8 17.7 22.6 28 30.8 10.3 8.3 20.6 14.1 31.5 18.7 10.9 4.6 22.2 8 159.5 9.8 137.3 1.8 400.5 2 535.8 1.3 135.2-0.7 142.4-2.3 152.8-6.4 10.5-4.1 23.9-10.6 35.7-18.7 11.8-8 21.9-17.5 30.1-28.2 8.3-10.7 14.8-22.5 20.1-34.3 5.3-11.7 9.4-23.3 10.2-69.3 0.8-46-1.8-124.7-9.8-169.4-8-44.8-20.8-51.7-32.9-56.1-12.2-4.4-23.4-6.1-32.1-6.8-8.7-0.7-14.9-0.4-20.5-0.1-5.5 0.3-10.4 0.7-200.4 0.5-190-0.2-565.2-1.1-940.5-2" />

  <g id="map" x="0" y="0" transform="scale(1) translate(0,0)">
    <image href="https://i.imgur.com/WaWS3m2.png">
    </image>
  </g>  
     
       <rect x="298" y="800" width="71" height="8" fill="gold" /> 
         <rect x="296" y="814" width="75" height="8" fill="#F3F3F3" />  
           <rect x="294" y="827" width="77" height="9" fill="gold" /> 
            <rect x="292" y="840" width="83" height="9.5" fill="#F3F3F3" /> 
           <rect x="290" y="855" width="87" height="11" fill="gold" />              
           <!-- Знак пешеходного перехода -->
       <image href="https://i.stack.imgur.com/1ILIG.jpg" x="260" y="695" width="40px" height="40px" />  
 
  
     <!-- Анимация пешеходов -->
  <use xlink:href="#Man" transform="translate(0,0) scale(2)" style="stroke:blue; fill:black;"> 
     <animateMotion id="an1"
       begin="startGreen.begin"
       dur="10s"
       repeatCount="1"  >
          <mpath xlink:href="#child"/>
     </animateMotion>    
   </use>  
     <use xlink:href="#Man" transform="translate(0,0) scale(2)" style="stroke:green; fill:black;"> 
       <animateMotion id="an2"
          begin="startGreen.begin+4s"
          dur="10s"
          repeatCount="1"  >
          <mpath xlink:href="#child"/>
       </animateMotion> 
     </use>  
          <use xlink:href="#Man" transform="translate(0,0) scale(1.5)" style="stroke:black; fill:black;"> 
       <animateMotion id="an3"
          begin="startGreen.begin"
          dur="10s"
          repeatCount="1"  >
          <mpath xlink:href="#child2"/>
       </animateMotion> 
     </use>
   <use xlink:href="#Man" transform="translate(0,0) scale(2)" style="stroke:red; fill:black;"> 
     <animateMotion id="an4"
           begin="startGreen.begin"
           dur="15s"
           repeatCount="1"  >
              <mpath xlink:href="#home1"/>
     </animateMotion>    
   </use>     
       <use xlink:href="#Man" transform="translate(0,0) scale(2)" style="stroke:black; fill:black;"> 
          <animateMotion id="an5"
              begin="startGreen.begin-3s"
              dur="10s"
              repeatCount="1"  >
              <mpath xlink:href="#home2"/>
         </animateMotion>    
      </use>      
        <use xlink:href="#Man" transform="translate(0,0) scale(2)" style="stroke:blue; fill:black;"> 
          <animateMotion id="an6"
              begin="startGreen.begin-3s"
              dur="12s"
              repeatCount="1"  >
              <mpath xlink:href="#home2"/>
          </animateMotion>    
       </use>    

           <use xlink:href="#Man" transform="translate(0,0) scale(2)" style="stroke:red; fill:black;"> 
          <animateMotion id="an7"
              begin="startGreen.begin-5s"
              dur="14s"
              repeatCount="1"  >
              <mpath xlink:href="#home2"/>
          </animateMotion>    
       </use>      
      
<use xlink:href="#Man" transform="translate(0,0) scale(2)" style="stroke:brown; fill:black;"> 
          <animateMotion id="an8"
              begin="startGreen.begin"
              dur="6s"
              repeatCount="1"  >
              <mpath xlink:href="#back"/>
         </animateMotion>    
</use>      
    <use xlink:href="#Man" transform="translate(0,0) scale(2)" style="stroke:blue; fill:black;"> 
          <animateMotion id="an9"
              begin="startGreen.begin-2s"
              dur="8s"
              repeatCount="1"  >
              <mpath xlink:href="#back"/>
         </animateMotion>    
    </use>      
<use xlink:href="#Man" transform="translate(0,0) scale(2)" style="stroke:brown; fill:black;"> 
          <animateMotion id="an9"
              begin="startGreen.begin-4s"
              dur="8s"
              repeatCount="1"  >
              <mpath xlink:href="#back"/>
         </animateMotion>    
</use>      

  <g transform="translate(312 675) scale(0.3)">
         <!-- верхняя крышка светофора-->
<circle cx="270" cy="55"  r="30" style="fill:grey; " />
            <!-- корпус светофора -->
<rect x="240" y="40" width="60" height="190" style="fill:gray;" />
   
        <!-- секции светофора -->
<g style="fill:none; stroke:black; stroke-width:2px;">
 <rect x="240" y="40" width="60" height="60"  />
 <rect x="240" y="103" width="60" height="60"  />
 <rect x="240" y="166" width="60" height="60"  />
</g> 
    <!-- сигнальные лампочки-->
<circle cx="270" cy="70"  r="20" fill="red" opacity="0.4" >
  <animate id="startRed" attributeName="opacity" begin="0s;smallGreen.end" dur="0.1s" to="1" fill="freeze" /> 
    <animate id="stopRed" attributeName="opacity" begin="startRed.end+5s" dur="0.1s" to="0.4" fill="freeze" /> 
    <animate id="bigRed" attributeName="r" begin="startRed.begin" dur="0.1s" to="28" fill="freeze" /> 
     <animate id="smallRed" attributeName="r" begin="bigRed.end+5s" dur="0.1s" to="20" fill="freeze" />
</circle>

<circle cx="270" cy="133"  r="20" fill="yellow" opacity="0.4" > 
   <animate id="startYellow" attributeName="opacity" begin="smallRed.end" dur="0.1s" to="1" fill="freeze" /> 
     <animate id="stopYellow" attributeName="opacity" begin="smallRed.end+2s" dur="0.1s" to="0.4" fill="freeze" /> 
    
    <animate id="bigYellow" attributeName="r" begin="smallRed.end" dur="0.1s" to="28" fill="freeze" /> 
      <animate id="smallYellow" attributeName="r" begin="smallRed.end +2s" dur="0.1s" to="22" fill="freeze" />
</circle>   
<circle cx="270" cy="196"  r="20" fill="lime" opacity="0.4" >
    <animate id="startGreen" attributeName="opacity" begin="smallYellow.end" dur="0.1s" to="1" fill="freeze" /> 
      <animate d="stopGreen" attributeName="opacity" begin="smallYellow.end+10s" dur="0.1s" to="0.4" fill="freeze" /> 
        <animate id="bigGreen" attributeName="r" begin="smallYellow.end" dur="0.1s" to="28" fill="freeze" /> 
      <animate id="smallGreen" attributeName="r" begin="smallYellow.end +10s" dur="0.1s" to="22" fill="freeze" />
</circle>   
      
          <!-- стойка светофора -->
<rect x="260" y="226" width="20" height="174" style="fill:gray;" /> 
  </g>        
   <!--Автомобиль-->
  <g id="car" >
  <!--Зеркала-->
<path transform="scale(0.1)" d="M371 88l-31-77c-3-6-9-11-17-11h-23l35 88zm0 142h-36l-35 88h23c8 0 14-5 17-11z" fill="red" />
  <!--Кузов-->
    <path transform="scale(0.1)" d="M492 224l13-30c9-22 9-48 0-70l-13-30a88 88 0 0 0-88-53L256 53 104 40c-36-3-70 17-86 49l-3 7c-20 40-20 86 0 126l3 7a88 88 0 0 0 86 49l152-13 148 12c38 3 73-18 88-53z" fill="orangered" />
    <!--Тень кузова-->
    <path  transform="scale(0.1)" d="M396 277c66-50 95-134 74-214 9 9 17 19 22 31l13 30c9 22 9 48 0 70l-13 30a88 88 0 0 1-88 53z" fill="red" />
    <!--Переднее стекло-->
    <path transform="scale(0.1)" d="M369 91l-2-3c-3-5-10-8-16-7l-77 7v142l77 7c6 1 13-2 16-7l2-3c27-41 27-95 0-136z" fill="white" />
    <!--Тень переднего стекла-->
    <path transform="scale(0.1)" d="M370 92c26 41 26 94-1 135l-2 3c-3 5-10 8-16 7l-59-6c44-33 72-84 78-139z" fill="lightgray" />
    <!--Заднее стекло-->
    <path transform="scale(0.1)" d="M150 88v142l-41 6c-7 2-14-2-18-8l-9-18c-18-32-18-70 0-102l9-18c4-6 11-10 18-8z" fill="white" />
    <!--Тень заднего стекла-->
    <path transform="scale(0.1)" d="M91 228l-5-9c31-35 53-76 64-121v132l-41 6c-7 2-14-2-18-8z" fill="lightgray" />
    <!--Фары-->
    <path transform="scale(0.1)" d="M411 72l53 36-10 15-53-36zm43 124l10 15-54 35-10-15z" fill="yellow" />
     </g> 
    <path id="car1" d="M-15,-10 L15,0 L -15,10 z" fill="yellow" stroke="red" stroke-width="7.06"/>
</svg>
</div>

0
5

Отвечая на вторую часть вопроса:

Как установить фиксированные размеры для SVG элемента (например 600x300) при том, чтобы размеры всех внутренних его элементов (карта и автомобиль) не уменьшались, и при движении автомобиля карта в след за ним передвигалась внутри SVG элемента?

Содержимое SVG элемента отрисовывается на холсте, который может быть абсолютно любого размера. Видимая часть холста всегда соответствует размерам SVG элемента, и эта область называется — вьюпорт viewport. SVG позволяет управлять размерами вьюпорта и поведением содержимого элемента, которое может показываться полностью, обрезаться или растягиваться. Таким поведением можно управлять с помощью атрибутов width и height — это привычные нам стандартные свойства ширины и высоты элемента.

<svg width="600px" height="300px">

Для кадрирования содержимого SVG элемента (изображения карты), чтобы показывать только какую-то ее часть, можно использовать атрибут viewBox, у которого первые два значения — это координаты X и Y от верхнего левого угла отображаемой области элемента, а последние два — его ширина и высота.

<svg viewBox="0 0 600 300">

Воспроизвести анимацию передвижения карты вслед за автомобилем можно просто с помощью анимационного элемента <animate> и атрибута attributeName:

<animate attributeName="viewBox" dur="1s" begin="svg.click" to="0 0 600 300" />

attributeName="viewBox" — в качестве значения укажем имя атрибута viewBox, первые два значения которого и будем анимировать, таким образом передвигая карту внутри SVG элемента.

begin="svg.click" — анимация начинается после клика в любом месте всего SVG элемента;

Результат:

body {margin: 0; overflow: hidden;}
<svg id="svg" viewBox="0 450 600 1" width="635px" height="200px">

<!--Анимация передвижения карты-->
<animate id="ani1" attributeName="viewBox" dur="9s" begin="svg.click+3s" fill="freeze" to="1000 450 600 1" restart="never" />
<animate id="ani2" attributeName="viewBox" dur="3s" begin="ani1.end+2s" fill="freeze" to="1000 130 600 1" />
<animate id="ani3" attributeName="viewBox" dur="3s" begin="ani2.end" fill="freeze" to="850 130 600 1" />
<animate id="ani4" attributeName="viewBox" dur="6s" begin="ani3.end" fill="freeze" to="850 800 600 1" />
<animate id="ani5" attributeName="viewBox" dur="8s" begin="ani4.end" fill="freeze" to="0 800 600 1" />
<animate id="ani6" attributeName="viewBox" dur="6s" begin="ani5.end" fill="freeze" to="0 190 600 1" />
<animate id="ani7" attributeName="viewBox" dur="4s" begin="ani6.end" fill="freeze" to="400 190 600 1" />
<animate id="ani8" attributeName="viewBox" dur="3s" begin="ani7.end" fill="freeze" to="550 450 600 1" />
<animate id="ani9" attributeName="viewBox" dur="4s" begin="ani8.end" fill="freeze" to="1000 450 600 1" />
<animate id="ani10" attributeName="viewBox" dur="3s" begin="ani9.end+2s" fill="freeze" to="1000 130 600 1" />
<animate id="ani11" attributeName="viewBox" dur="3s" begin="ani10.end" fill="freeze" to="850 130 600 1" />
<animate id="ani12" attributeName="viewBox" dur="3s" begin="ani11.end" fill="freeze" to="850 450 600 1" />
<animate id="ani13" attributeName="viewBox" dur="2s" begin="ani12.end" fill="freeze" to="550 450 600 1" />
<animate id="ani14" attributeName="viewBox" dur="3s" begin="ani13.end" fill="freeze" to="400 190 600 1" />
<animate id="ani15" attributeName="viewBox" dur="5s" begin="ani14.end" fill="freeze" to="0 190 600 1" />
<animate id="ani16" attributeName="viewBox" dur="5s" begin="ani15.end" fill="freeze" to="0 800 600 1" />
<animate id="ani17" attributeName="viewBox" dur="9s" begin="ani16.end" fill="freeze" to="850 800 600 1" />
<animate id="ani18" attributeName="viewBox" dur="3s" begin="ani17.end" fill="freeze" to="850 450 600 1" />
<animate id="ani19" attributeName="viewBox" dur="7s" begin="ani18.end" fill="freeze" to="0 450 600 1" />
<animate id="ani20" attributeName="viewBox" dur="4s" begin="ani19.end" fill="remove" to="0 450 600 1" />

<!--Карта-->
<g><image x="0" y="0" href="https://i.imgur.com/uTmJYO7.png">
</image></g>

  <!--Автомобиль 1-->
  <g transform="scale(0.08)">
  <!--Зеркала-->
<path d="M371 88l-31-77c-3-6-9-11-17-11h-23l35 88zm0 142h-36l-35 88h23c8 0 14-5 17-11z" fill="red" />
  <!--Кузов-->
    <path d="M492 224l13-30c9-22 9-48 0-70l-13-30a88 88 0 0 0-88-53L256 53 104 40c-36-3-70 17-86 49l-3 7c-20 40-20 86 0 126l3 7a88 88 0 0 0 86 49l152-13 148 12c38 3 73-18 88-53z" fill="orangered" />
    <!--Тень кузова-->
    <path d="M396 277c66-50 95-134 74-214 9 9 17 19 22 31l13 30c9 22 9 48 0 70l-13 30a88 88 0 0 1-88 53z" fill="red" />
    <!--Переднее стекло-->
    <path d="M369 91l-2-3c-3-5-10-8-16-7l-77 7v142l77 7c6 1 13-2 16-7l2-3c27-41 27-95 0-136z" fill="white" />
    <!--Тень переднего стекла-->
    <path d="M370 92c26 41 26 94-1 135l-2 3c-3 5-10 8-16 7l-59-6c44-33 72-84 78-139z" fill="lightgray" />
    <!--Заднее стекло-->
    <path d="M150 88v142l-41 6c-7 2-14-2-18-8l-9-18c-18-32-18-70 0-102l9-18c4-6 11-10 18-8z" fill="white" />
    <!--Тень заднего стекла-->
    <path d="M91 228l-5-9c31-35 53-76 64-121v132l-41 6c-7 2-14-2-18-8z" fill="lightgray" />
    <!--Фары-->
    <path d="M411 72l53 36-10 15-53-36zm43 124l10 15-54 35-10-15z" fill="yellow" />
    <!--Анимация движения автомобиля-->
    <animateMotion begin="svg.click" dur="100s" rotate="auto" fill="remove"  restart="never"><mpath xlink:href="#mPath"/></animateMotion>
  </g>

<!--Путь-->
<path id="mPath" fill="none" stroke="none" stroke-width="1px" d="m -99.912826,454.69419 c 498.479776,0.34705 996.938426,0.69408 1254.330826,-0.30051 257.3924,-0.99458 273.6767,-3.33043 291.0715,-9.38751 17.3947,-6.05707 35.8969,-15.83426 50.2985,-27.75511 14.4016,-11.92086 24.8412,-26.17493 31.7214,-40.43382 6.8803,-14.25888 10.2705,-28.61732 11.9657,-52.9476 1.6952,-24.33028 1.6952,-59.02985 -0.665,-82.57453 -2.3601,-23.54467 -7.2118,-36.4826 -14.0545,-48.5995 -6.8426,-12.1169 -15.8916,-23.77997 -27.6297,-34.09556 -11.7382,-10.31559 -25.9532,-19.19999 -41.0056,-25.40324 -15.0524,-6.20326 -30.4169,-9.55194 -69.2062,-10.94805 -38.7892,-1.39612 -100.8097,-0.79785 -138.2027,3.19068 -37.393,3.98852 -50.156,11.36713 -61.6233,19.24462 -11.4672,7.87749 -21.6378,16.25326 -31.0111,28.11953 -9.3733,11.86626 -17.9485,27.22184 -23.1335,42.27897 -5.1851,15.05713 -6.9799,29.81442 -6.2904,113.36717 0.6894,83.55275 3.8628,235.89442 2.2774,319.15363 -1.5855,83.25922 -7.9297,97.43345 -14.299,109.29926 -6.3694,11.86581 -12.7638,21.42331 -23.0297,31.61914 -10.2658,10.19583 -24.4026,21.02956 -40.3192,28.01169 -15.9167,6.98212 -33.6132,10.11232 -169.8369,11.61614 -136.2237,1.50383 -392.55774,1.38025 -524.9492,-0.008 -132.39146,-1.38796 -144.02444,-4.04208 -158.08642,-10.35566 -14.06198,-6.31358 -30.55297,-16.28707 -43.38561,-29.05138 -12.83265,-12.76431 -22.0061,-28.31929 -27.8855,-42.45928 -5.87939,-14.13999 -8.47979,-26.94196 -10.27203,-100.47023 -1.79223,-73.52828 -2.78387,-207.81323 -1.5203,-280.96829 1.26357,-73.15505 4.82173,-85.30523 10.94535,-97.89062 6.12361,-12.58539 14.89094,-25.87328 24.09756,-35.98099 9.20662,-10.10771 18.85146,-17.03406 28.86704,-23.1262 10.01558,-6.09214 20.60426,-11.45249 33.1277,-14.56594 12.52344,-3.11344 27.38721,-4.18568 92.42629,-4.80853 65.03907,-0.62285 180.25337,-0.79638 244.61406,0.006 64.36068,0.80223 77.9292,2.58817 90.52235,5.62701 12.59314,3.03884 24.38891,7.38863 35.53484,13.93766 11.14593,6.54902 21.71533,15.32362 30.78917,25.49463 9.07384,10.17102 16.6519,21.73754 22.03623,33.80299 5.38432,12.06546 8.57509,24.6291 10.37282,37.59181 1.79773,12.96271 2.19054,25.92537 3.68643,36.7943 1.49589,10.86892 4.08838,19.4441 8.5757,29.51527 4.48731,10.07117 10.86884,21.63769 19.34479,32.00785 8.47595,10.37015 19.04536,19.5436 31.01117,27.32113 11.96581,7.77753 25.32714,14.15907 41.63439,17.99503 16.30724,3.83597 35.55912,5.12668 132.37865,5.88991 96.81952,0.76322 271.19562,0.99895 363.72492,-0.95859 92.5293,-1.95754 103.2022,-6.10792 116.269,-12.35557 13.0668,-6.24764 28.5262,-14.59181 41.6012,-25.39608 13.075,-10.80427 23.9224,-24.26307 30.9229,-38.41774 7.0005,-14.15467 10.1501,-28.72145 11.6459,-53.45059 1.4958,-24.72913 1.2963,-59.4287 -1.0966,-82.96109 -2.3929,-23.53239 -6.9797,-35.89659 -13.3612,-47.86236 -6.3816,-11.96577 -14.5579,-23.53227 -26.1246,-33.70334 -11.5667,-10.17107 -26.5235,-18.9457 -41.0818,-25.22786 -14.5582,-6.28215 -28.7173,-10.0712 -67.8057,-11.66678 -39.0884,-1.59557 -103.1031,-0.9973 -139.7981,2.19349 -36.6949,3.1908 -46.0678,8.97407 -57.4354,17.05099 -11.3675,8.07692 -24.7288,18.4469 -35.6394,31.48734 -10.9106,13.04044 -19.2032,28.44083 -23.79,38.3127 -4.5868,9.87188 -5.3844,14.05976 -5.8745,43.90786 -0.4901,29.8481 -0.6728,85.35273 -1.5828,117.18944 -0.9101,31.83672 -2.5492,40.01144 -4.9396,46.08821 -2.3903,6.07678 -5.5431,10.08439 -9.1661,13.34313 -3.6231,3.25875 -7.8497,5.85292 -11.9456,7.63137 -4.0959,1.77846 -8.2226,2.80486 -12.35,3.70703 -4.1274,0.90217 -8.3511,1.70123 -15.2602,2.61208 -6.9091,0.91084 -16.5712,1.94335 -53.1744,1.82245 -36.60324,-0.1209 -100.41744,-1.39855 -136.74852,-3.43195 -36.33109,-2.0334 -45.30512,-4.82531 -56.34804,-10.05377 -11.04293,-5.22846 -23.85678,-12.71964 -34.62607,-21.99289 -10.76929,-9.27325 -19.34447,-20.2415 -26.02555,-32.9052 -6.68108,-12.6637 -11.46723,-27.02214 -14.15584,-41.87982 -2.68862,-14.85768 -3.29455,-30.61179 -5.59874,-44.10428 -2.30418,-13.49249 -6.27078,-24.79729 -11.45576,-35.1676 -5.18498,-10.37032 -11.56651,-19.74319 -19.94239,-28.81732 -8.37588,-9.07412 -18.74587,-17.84873 -30.58262,-25.23162 -11.83675,-7.38288 -25.35099,-13.46843 -40.08835,-16.96742 -14.73735,-3.49898 -31.13295,-4.602 -80.75177,-4.78528 -49.61881,-0.18329 -132.51834,0.5518 -199.72565,-0.25935 -67.20732,-0.81114 -118.78604,-3.16801 -153.94897,5.08408 -35.16294,8.2521 -54.07322,27.27838 -64.86088,39.296 -10.78765,12.01762 -13.83676,17.45635 -17.22491,23.55107 -3.38815,6.09471 -7.14328,12.89528 -10.19929,22.47814 -3.056,9.58286 -5.41282,21.94707 -6.80875,32.51677 -1.39594,10.56971 -1.83105,19.34449 -1.74944,88.54645 0.0816,69.20196 0.68489,199.91165 1.69203,266.816 1.00715,66.90436 2.42785,72.16943 5.23543,80.66389 2.80758,8.49446 7.10255,20.49956 14.36313,31.45413 7.26057,10.95458 18.22217,21.95816 26.06904,29.12803 7.84687,7.16986 12.89749,10.82574 18.00742,14.04215 5.10993,3.21642 10.29249,6.00112 17.54427,9.17883 7.25178,3.1777 16.59225,6.75905 45.78552,8.31721 29.19328,1.55816 78.23957,1.0936 206.24642,0.65955 128.00685,-0.43404 334.97203,-0.83757 447.01488,-1.35205 112.0429,-0.51447 128.9464,-1.13233 144.5305,-4.74511 15.5841,-3.61277 29.1142,-10.05001 40.9913,-18.04602 11.877,-7.99601 21.9376,-17.47271 30.2138,-28.14209 8.2763,-10.66938 14.7677,-22.53068 19.5022,-34.21388 4.7344,-11.6832 7.7117,-23.18764 9.1948,-67.39179 1.4832,-44.20414 1.4721,-119.33427 -15.404,-164.24151 -16.876,-44.90725 -49.0978,-55.5475 -72.5317,-61.30461 -23.4339,-5.7571 -37.3143,-6.37873 -54.02673,-6.64213 -16.71246,-0.2634 -36.24847,-0.16841 -53.64187,-0.38373 -17.3934,-0.21532 -32.63605,-0.74092 -205.4531,-1.02106 -172.81705,-0.28014 -503.18795,-0.31471 -833.56907,-0.34928" />

<!--Карта-->
<g x="0" y="0"><image href="https://i.imgur.com/WaWS3m2.png"></image></g>

</svg>

1
  • 1
    Этот ответ весомый шаг вперед в освоении SVG и полностью отвечает на твой вопрос. Можно его развивать дальше, чтобы цельная картинка карты была всегда, а увеличение фрагмента карты с текущим положением автомобиля возникала, например в модальном окне при клике на автомобиле 9 мая 2021 в 7:01

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.