javascript - 无限水平地重复 SVG

Question

我想创建一个无限(重复)的汽车水平行驶动画，风景(不同图层，SVG)经过。

我找不到如何沿 X 轴重复我的 SVG 横向图层，所以当我播放动画时，它一直在重复。

我的动画是用 CSS 关键帧和 translateX 完成的(虽然不确定这是否是最佳解决方案)。

Answer 1

这里的想法是您希望“模仿”背景以使其重复。我不确定这是最好的解决方案，它只是我过去使用过并且非常喜欢的一个。

首先，我们将复制具有相同属性的背景 svg，并将其命名为 #back 而不是 #front。

keyframes frontScroll {
    from {transform: translateX(0);}
    to {transform: translateX(100%);}
}
keyframes backScroll {
    from {transform: translateX(-100%);}
    to {transform: translateX(0%);}
}

接下来，我们设置另一个具有完全相同属性的动画，除了它从 -100% 移动到 0% 而原始动画从 0% 到 100%`。

如果我们将它全部包装在一起，会发生以下情况:

body {
  margin : 0;
  overflow : hidden;
}
#front {
  position : absolute;
  left :0;
  right:0;
  bottom:0;
  z-index : 9;
  -webkit-animation: frontScroll 2.5s linear infinite;
 animation: frontScroll 2.5s linear infinite;
}

#back {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 9
  -webkit-animation: backScroll 2.5s linear infinite;
  animation: backScroll 2.5s linear infinite;
}

keyframes frontScroll {
from {transform: translateX(0);}
to {transform: translateX(100%);}
}

@-webkit-keyframes frontScroll {
from {transform: translateX(0);}
to {transform: translateX(100%);}
}

keyframes backScroll {
from {transform: translateX(-100%);}
to {transform: translateX(0%);}
}

@-webkit-keyframes backScroll {
from {transform: translateX(-100%);}
to {transform: translateX(0%);}
}

<div id="back">
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 1200 313.9" xml:space="preserve">
<style type="text/css">
	.st0{fill:#602700;}
</style>
<g id="XMLID_171_">
	<g id="XMLID_173_">
		<g id="XMLID_193_">
			<g id="XMLID_202_">
				<path id="XMLID_203_" class="st0" d="M833.9,230.9l-25.9-3.7c0,0,0,0,0,0l-204.6,28c0,0,0,0,0,0l-160.5-3.8l-162.3,3.8
					c0,0,0,0,0,0L200,240.8c0,0,0,0,0,0L0,241.5c0,0,0,0,0,0v72.4c0,0,0,0,0,0H1200c0,0,0,0,0,0l0-109.9c0,0,0,0,0,0l-200-25.2
					c0,0,0,0,0,0L833.9,230.9C833.9,230.9,833.9,230.9,833.9,230.9z"/>
			</g>
			<path id="XMLID_200_" class="st0" d="M258.3,120.9V133c0,10.5,4.6,20,11.9,26.8c7.6,7,12.1,16.4,12.1,26.5v81c0,0,0,0,0,0h28.9
				c0,0,0,0,0,0v-81c0-10.1,4.5-19.5,12.1-26.5c7.3-6.7,11.9-16.3,11.9-26.8v-32.2c0-5.8-5.3-10.4-11.5-9.5c-5,0.7-8.5,5-8.5,9.8
				V133c0,6.3-3.4,11.8-8.5,14.9c0,0,0,0,0,0V79.6c0-4.8-3.6-9.2-8.5-9.8c-6.2-0.8-11.5,3.7-11.5,9.5v68.5c0,0,0,0,0,0
				c-5.1-3.2-8.5-8.7-8.5-14.9V14.4c0-4.8-3.6-9.2-8.5-9.8c-6.2-0.8-11.5,3.7-11.5,9.5v83.6c0,0,0,0,0,0c-7.9-1-14-7.4-14-15.3V26.6
				c0-3.2-2.5-6-5.8-6c-3.4-0.1-6.2,2.5-6.2,5.8v56.1c0,11,6.9,20.5,16.8,24.7C254.7,109.5,258.3,115,258.3,120.9z"/>
			<path id="XMLID_199_" class="st0" d="M657.7,257.6h27.9c0,0,0,0,0,0v-69.3c0-8.9,4.6-17.2,12.1-22.4c10.9-7.7,18-20.2,18-34.2
				l0-86.8c0-4.2-3.1-8-7.4-8.6c-5.4-0.7-10,3.3-10,8.3v87.1c0,11.2-7.5,20.8-18,24.3c0,0,0,0,0,0V8.7c0-4.2-3.1-8-7.4-8.6
				c-5.4-0.7-10,3.3-10,8.3v147.5c0,0,0,0,0,0c-10.5-3.5-18-13.1-18-24.3V76.9c0-4.2-3.1-8-7.4-8.6c-5.4-0.7-10,3.3-10,8.3v55
				c0,14,7.1,26.5,18,34.2c7.5,5.3,12.1,13.5,12.1,22.4L657.7,257.6C657.7,257.6,657.7,257.6,657.7,257.6z"/>
		</g>
	</g>
</g>
</svg>
</div>

<div id="front">
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 1200 313.9" xml:space="preserve">
<style type="text/css">
	.st0{fill:#602700;}
</style>
<g id="XMLID_171_">
	<g id="XMLID_173_">
		<g id="XMLID_193_">
			<g id="XMLID_202_">
				<path id="XMLID_203_" class="st0" d="M833.9,230.9l-25.9-3.7c0,0,0,0,0,0l-204.6,28c0,0,0,0,0,0l-160.5-3.8l-162.3,3.8
					c0,0,0,0,0,0L200,240.8c0,0,0,0,0,0L0,241.5c0,0,0,0,0,0v72.4c0,0,0,0,0,0H1200c0,0,0,0,0,0l0-109.9c0,0,0,0,0,0l-200-25.2
					c0,0,0,0,0,0L833.9,230.9C833.9,230.9,833.9,230.9,833.9,230.9z"/>
			</g>
			<path id="XMLID_200_" class="st0" d="M258.3,120.9V133c0,10.5,4.6,20,11.9,26.8c7.6,7,12.1,16.4,12.1,26.5v81c0,0,0,0,0,0h28.9
				c0,0,0,0,0,0v-81c0-10.1,4.5-19.5,12.1-26.5c7.3-6.7,11.9-16.3,11.9-26.8v-32.2c0-5.8-5.3-10.4-11.5-9.5c-5,0.7-8.5,5-8.5,9.8
				V133c0,6.3-3.4,11.8-8.5,14.9c0,0,0,0,0,0V79.6c0-4.8-3.6-9.2-8.5-9.8c-6.2-0.8-11.5,3.7-11.5,9.5v68.5c0,0,0,0,0,0
				c-5.1-3.2-8.5-8.7-8.5-14.9V14.4c0-4.8-3.6-9.2-8.5-9.8c-6.2-0.8-11.5,3.7-11.5,9.5v83.6c0,0,0,0,0,0c-7.9-1-14-7.4-14-15.3V26.6
				c0-3.2-2.5-6-5.8-6c-3.4-0.1-6.2,2.5-6.2,5.8v56.1c0,11,6.9,20.5,16.8,24.7C254.7,109.5,258.3,115,258.3,120.9z"/>
			<path id="XMLID_199_" class="st0" d="M657.7,257.6h27.9c0,0,0,0,0,0v-69.3c0-8.9,4.6-17.2,12.1-22.4c10.9-7.7,18-20.2,18-34.2
				l0-86.8c0-4.2-3.1-8-7.4-8.6c-5.4-0.7-10,3.3-10,8.3v87.1c0,11.2-7.5,20.8-18,24.3c0,0,0,0,0,0V8.7c0-4.2-3.1-8-7.4-8.6
				c-5.4-0.7-10,3.3-10,8.3v147.5c0,0,0,0,0,0c-10.5-3.5-18-13.1-18-24.3V76.9c0-4.2-3.1-8-7.4-8.6c-5.4-0.7-10,3.3-10,8.3v55
				c0,14,7.1,26.5,18,34.2c7.5,5.3,12.1,13.5,12.1,22.4L657.7,257.6C657.7,257.6,657.7,257.6,657.7,257.6z"/>
		</g>
	</g>
</g>
</svg>
</div>

现在我们可以轻松地将汽车或其他东西放在陆地上，瞧，一辆永无止境的汽车。