我如何让一个动画.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

第二个问题我不知道，我不是苹果用户。第一个问题的答案是:如果你想要"铁路";元素来扩展浏览器的宽度和100%是行不通的，我认为你可以把屏幕的宽度的大小，比如1080px。或者一种非常复杂的方法是让页面读取屏幕的宽度，然后宽度等于屏幕宽度大小的变量。