无限水平重复 SVG答案

【问题标题】：Repeat SVG horizontally infinitely无限水平重复 SVG
【发布时间】：2019-01-23 17:45:01
【问题描述】：

我希望创建一个汽车水平行驶的无限（重复）动画，其中风景（不同图层，SVG）经过。

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

我的动画是用 CSS 关键帧和 translateX 完成的（但不确定它是否是最好的解决方案）。

【问题讨论】：

你用什么做动画？
@Roberrrt 使用 CSS 关键帧和 TranslateX，但不确定它是否是最佳解决方案
这个解决方案已经足够好了，我昨天回答了一个类似的问题（不是重复的），让我查一下。您能否同时分享您当前的代码？在这里或在 codepen/jsfiddle
它是非常基础的，只有一层，但是你去吧：cdpn.io/aBEpjN

标签： javascript css svg

【解决方案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% to100%` 移动。

如果我们都把它包装在一起，会发生以下情况：

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>

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

【讨论】：

哇，太棒了！谢谢！