无限水平重复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% to 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> 

现在，我们可以轻松地将汽车或其他东西放置在永无止境的驾驶汽车和土地上。