第二个 Instagram 按钮的 CSS 属性

Question

Sevastopol'

Asked:2022-05-05 20:19:53 +0000 UTC2022-05-05 20:19:53 +0000 UTC 2022-05-05 20:19:53 +0000 UTC

汽车在城市道路上的运动动画

772

我有一张用以下内容绘制的汽车图像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 元素内跟随它移动?

4 个回答

Voted

Alexandr_TT · Answer 1 · 2022-05-05T22:14:17Z

滚动时汽车运动的动画

基于@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>

更新

根据@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) браузеры работают с масштабированием немного по разному

Sevastopol' · Answer 2 · 2022-05-05T20:19:53Z

回答问题的第一部分：

如何播放城市地图上描绘的汽车沿整条道路移动的动画？

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

Alexandr_TT · Answer 3 · 2022-05-07T04:52:39Z

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

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

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

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

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

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://isstatic.askoverflow.dev/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>

Sevastopol' · Answer 4 · 2022-05-07T23:05:42Z

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

Как установить фиксированные размеры для 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>

汽车在城市道路上的运动动画

滚动时汽车运动的动画

更新

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

表格填充不起作用

提示 50/50，有两个，其中一个是正确的

在 PyQt5 中停止进程

我的脚本不工作

在文本文件中写入和读取列表

如何像屏幕截图中那样并排排列这些块？

确定文本文件中每一行的字符数

将接口对象传递给 JAVA 构造函数

正确更新数据库中的数据

Python解析不是css

汽车在城市道路上的运动动画

4 个回答

滚动时汽车运动的动画

更新

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

相关问题