如何让动画 .svg 元素随窗口大小调整大小，但保持在屏幕上的位置？

Question

我正在尝试使用 CSS 创建动画。 它由几个 .svg 组成。

有两个挑战我似乎找不到解决方案：

1. 如何使“rails”元素随着浏览器的宽度延伸，同时保持原位？使用宽度：100% 或宽度：100vw 时；当我制作浏览器窗口时，元素开始移动。让它看起来很奇怪（火车应该留在铁轨上;-)）
2. 如何让 css 动画在移动 Safari 上运行？它似乎适用于 iOS/iPadOS 15.1，但不适用于以前的版本。

.rails img {
position:absolute;
width:1300px;
right:0;
top:238px;
}
.trein-animatie {
height:300px;
width:auto;
background-image: url("https://groenhuysen.ecdjdemo.nl/wp-content/uploads/2021/10/Landschap_volgpagina.svg");
background-position:center;
background-size:cover;
}

.bord {
position:absolute;
width:175px;
height:auto;
left:10%;
top:51px;
}
.wagon {
width:250px;
height:auto;
position:absolute;
top:155px;
}
.locomotief {
width:270px;
height:auto;
position:absolute;
left:250px;
top:47px;
}

.trein {
position:absolute;
top:0px;
left:7%;
 -webkit-animation: linear;
 -webkit-animation-name: binnenrijden;
 -webkit-animation-duration: 3s;
    animation:linear;
    animation-name:binnenrijden;
    animation-duration:3s;
}
@-webkit-keyframes binnenrijden {
  0% {
    left:-600px;
  }
  100% {
    left:7%;    
  }
}
@keyframes binnenrijden {
  0% {
    left:-600px;
  }
  100% {
    left:7%;    
  }
}

<div class="trein-animatie">
<div class="bord"><img src="https://groenhuysen.ecdjdemo.nl/wp-content/uploads/2021/10/Modulebord_1.svg"></div>
<div class="trein"><div class="wagon"><img src="https://groenhuysen.ecdjdemo.nl/wp-content/uploads/2021/10/Wagon_module_1_De_opgeruimde_werkplek.svg"></div><div class="locomotief"><img src="https://groenhuysen.ecdjdemo.nl/wp-content/uploads/2021/10/Locomotief_witte_rand.svg"></div></div><div class="rails"><img src="https://groenhuysen.ecdjdemo.nl/wp-content/uploads/2021/10/Logo_roze_groen.png"></div></div>

Answer 1

第二个问题我不知道，我不是苹果用户。第一个问题的答案：如果您希望“rails”元素随着浏览器的宽度而扩展并且 100% 不起作用，我认为您可以将屏幕宽度的大小设置为例如 1080px。或者一个非常复杂的方法是让页面读取屏幕的宽度，然后宽度与屏幕宽度大小的变量相等。