完美循环svg动画

Question

我正在尝试循环一个音频波形svg，使其完美循环，但我无法解决。然而，我目前有以下内容，正如你所看到的，这个循环并不完美。有简单的方法吗？或者有人能为我指明正确的方向吗？

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="waveform" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 220 100" style="enable-background:new 0 0 220 100;" xml:space="preserve">
<g id="waveform">
<path d="M186.4,0c-1.3,0.1-2.2,1.3-2.2,2.6v94.8c0,1.5,1,2.6,2.2,2.6s2.2-1.1,2.2-2.6V2.6C188.6,1.1,187.7,0,186.4,0z"/>
<path d="M69.4,20.2c-1.3,0-2.2,1.2-2.2,2.6v54.5c0,1.5,1,2.6,2.2,2.6c1.3,0,2.2-1.1,2.2-2.6V22.8C71.6,21.3,70.7,20.2,69.4,20.2z"/>
<path d="M58.7,0c-1.2,0.1-2.2,1.3-2.2,2.6v94.8c0,1.5,1,2.6,2.2,2.6s2.2-1.1,2.2-2.6V2.6C60.9,1.1,60,0,58.7,0z"/>
<path d="M101.2,11.9c-1.2,0-2.2,1.1-2.2,2.6v71c0,1.5,1,2.6,2.2,2.6c1.3,0,2.2-1.1,2.2-2.6v-71C103.4,13,102.5,11.9,101.2,11.9z"/>
<path d="M48.2,20.2c-1.3,0-2.2,1.2-2.2,2.6v54.5c0,1.5,1,2.6,2.2,2.6s2.2-1.1,2.2-2.6V22.8C50.4,21.3,49.4,20.2,48.2,20.2z"/>
<path d="M90.7,35.6c-1.3,0-2.2,1.2-2.2,2.6V62c0,1.5,1,2.6,2.2,2.6c1.3,0,2.2-1.1,2.2-2.6V38.2C92.9,36.7,91.9,35.6,90.7,35.6z"/>
<path d="M16.2,22.1C15,22.2,14,23.3,14,24.7v50.6c0,1.5,1,2.6,2.2,2.6s2.2-1.1,2.2-2.6V24.7C18.4,23.2,17.4,22.1,16.2,22.1z"/>
<path d="M5.7,35.6c-1.3,0-2.2,1.2-2.2,2.6V62c0,1.5,1,2.6,2.2,2.6s2.2-1.1,2.2-2.6V38.2C7.9,36.7,6.9,35.6,5.7,35.6z"/>
<path d="M37.4,11.9c-1.2,0-2.2,1.1-2.2,2.6v71c0,1.5,1,2.6,2.2,2.6s2.2-1.1,2.2-2.6v-71C39.7,13,38.7,11.9,37.4,11.9z"/>
<path d="M26.9,35.6c-1.3,0-2.2,1.2-2.2,2.6V62c0,1.5,1,2.6,2.2,2.6c1.3,0,2.2-1.1,2.2-2.6V38.2C29.1,36.7,28.2,35.6,26.9,35.6z"/>
<path d="M80,11.9c-1.2,0-2.2,1.1-2.2,2.6v71c0,1.5,1,2.6,2.2,2.6s2.2-1.1,2.2-2.6v-71C82.2,13,81.2,11.9,80,11.9z"/>
<path d="M154.4,35.6c-1.3,0-2.2,1.2-2.2,2.6V62c0,1.5,1,2.6,2.2,2.6c1.3,0,2.2-1.1,2.2-2.6V38.2C156.7,36.7,155.7,35.6,154.4,35.6z"/>
<path d="M165.2,11.9c-1.3,0-2.2,1.1-2.2,2.6v71c0,1.5,1,2.6,2.2,2.6s2.2-1.1,2.2-2.6v-71C167.4,13,166.4,11.9,165.2,11.9z"/>
<path d="M197,20.2c-1.3,0-2.2,1.2-2.2,2.6v54.5c0,1.5,1,2.6,2.2,2.6c1.3,0,2.2-1.1,2.2-2.6V22.8C199.2,21.3,198.2,20.2,197,20.2z"/>
<path d="M207.7,11.9c-1.3,0-2.2,1.1-2.2,2.6v71c0,1.5,1,2.6,2.2,2.6s2.2-1.1,2.2-2.6v-71C209.9,13,208.9,11.9,207.7,11.9z"/>
<path d="M175.7,20.2c-1.3,0-2.2,1.2-2.2,2.6v54.5c0,1.5,1,2.6,2.2,2.6c1.3,0,2.2-1.1,2.2-2.6V22.8C177.9,21.3,177,20.2,175.7,20.2z"/>
<path d="M122.7,0c-1.4,0.1-2.2,1.3-2.2,2.6v94.8c0,1.5,1,2.6,2.2,2.6c1.3,0,2.2-1.1,2.2-2.6V2.6C124.9,1.1,123.9,0,122.7,0z"/>
<path d="M111.9,20.2c-1.3,0-2.2,1.2-2.2,2.6v54.5c0,1.5,1,2.6,2.2,2.6c1.3,0,2.2-1.1,2.2-2.6V22.8
C114.2,21.3,113.2,20.2,111.9,20.2z"/>
<path d="M133.2,20.2c-1.3,0-2.2,1.2-2.2,2.6v54.5c0,1.5,1,2.6,2.2,2.6c1.3,0,2.2-1.1,2.2-2.6V22.8
C135.4,21.3,134.4,20.2,133.2,20.2z"/>
<path d="M143.9,11.9c-1.4,0-2.2,1.1-2.2,2.6v71c0,1.5,1,2.6,2.2,2.6c1.3,0,2.2-1.1,2.2-2.6v-71C146.1,13,145.2,11.9,143.9,11.9z"/>
<path d="M-121.9,20.1c-1.3,0-2.2,1.1-2.2,2.6v54.5c0,1.5,1,2.6,2.2,2.6c1.3,0,2.2-1.2,2.2-2.6V22.7
C-119.7,21.2-120.6,20.1-121.9,20.1z"/>
<path d="M-89.9,11.9c-1.3,0-2.2,1.1-2.2,2.6v71c0,1.5,1,2.6,2.2,2.6c1.2,0,2.2-1.1,2.2-2.6v-71C-87.7,13-88.6,11.9-89.9,11.9z"/>
<path d="M-111.4,0c-1.3,0-2.2,1.1-2.2,2.6v94.8c0,1.5,1,2.6,2.2,2.6c1.4-0.1,2.2-1.3,2.2-2.6V2.6C-109.1,1.1-110.1,0-111.4,0z"/>
<path d="M-100.6,20.1c-1.3,0-2.2,1.1-2.2,2.6v54.5c0,1.5,1,2.6,2.2,2.6c1.3,0,2.2-1.2,2.2-2.6V22.7
C-98.4,21.2-99.4,20.1-100.6,20.1z"/>
<path d="M-79.4,35.4c-1.3,0-2.2,1.1-2.2,2.6v23.8c0,1.5,1,2.6,2.2,2.6c1.3,0,2.2-1.2,2.2-2.6V38C-77.2,36.5-78.1,35.4-79.4,35.4z"/>
<path d="M-68.6,11.9c-1.3,0-2.2,1.1-2.2,2.6v71c0,1.5,1,2.6,2.2,2.6c1.2,0,2.2-1.1,2.2-2.6v-71C-66.4,13-67.4,11.9-68.6,11.9z"/>
<path d="M-36.9,20.1c-1.3,0-2.2,1.1-2.2,2.6v54.5c0,1.5,1,2.6,2.2,2.6c1.3,0,2.2-1.2,2.2-2.6V22.7C-34.6,21.2-35.6,20.1-36.9,20.1z"/>
<path d="M-47.4,0c-1.3,0-2.2,1.1-2.2,2.6v94.8c0,1.5,1,2.6,2.2,2.6c1.2-0.1,2.2-1.3,2.2-2.6V2.6C-45.2,1.1-46.1,0-47.4,0z"/>
<path d="M-58.1,20.1c-1.3,0-2.2,1.1-2.2,2.6v54.5c0,1.5,1,2.6,2.2,2.6c1.3,0,2.2-1.2,2.2-2.6V22.7C-55.9,21.2-56.9,20.1-58.1,20.1z"/>
<path d="M-15.6,35.4c-1.3,0-2.2,1.1-2.2,2.6v23.8c0,1.5,1,2.6,2.2,2.6c1.3,0,2.2-1.2,2.2-2.6V38C-13.4,36.5-14.3,35.4-15.6,35.4z"/>
<path d="M-4.9,22.1c-1.3,0-2.2,1.1-2.2,2.6v50.6c0,1.5,1,2.6,2.2,2.6c1.2-0.1,2.2-1.2,2.2-2.6V24.7C-2.7,23.2-3.6,22.1-4.9,22.1z"/>
<path d="M-185.7,20.1c-1.3,0-2.2,1.1-2.2,2.6v54.5c0,1.5,1,2.6,2.2,2.6c1.3,0,2.2-1.2,2.2-2.6V22.7
C-183.4,21.2-184.4,20.1-185.7,20.1z"/>
<path d="M-196.4,11.9c-1.3,0-2.2,1.1-2.2,2.6v71c0,1.5,1,2.6,2.2,2.6s2.2-1.1,2.2-2.6v-71C-194.2,13-195.1,11.9-196.4,11.9z"/>
<path d="M-26.1,11.9c-1.3,0-2.2,1.1-2.2,2.6v71c0,1.5,1,2.6,2.2,2.6c1.2,0,2.2-1.1,2.2-2.6v-71C-23.9,13-24.9,11.9-26.1,11.9z"/>
<path d="M-164.4,20.1c-1.3,0-2.2,1.1-2.2,2.6v54.5c0,1.5,1,2.6,2.2,2.6c1.3,0,2.2-1.2,2.2-2.6V22.7
C-162.2,21.2-163.1,20.1-164.4,20.1z"/>
<path d="M-175.1,0c-1.3,0-2.2,1.1-2.2,2.6v94.8c0,1.5,1,2.6,2.2,2.6c1.3-0.1,2.2-1.3,2.2-2.6V2.6C-172.9,1.1-173.9,0-175.1,0z"/>
<path d="M-143.1,35.4c-1.3,0-2.2,1.1-2.2,2.6v23.8c0,1.5,1,2.6,2.2,2.6c1.3,0,2.2-1.2,2.2-2.6V38
C-140.9,36.5-141.9,35.4-143.1,35.4z"/>
<path d="M-153.9,11.9c-1.3,0-2.2,1.1-2.2,2.6v71c0,1.5,1,2.6,2.2,2.6s2.2-1.1,2.2-2.6v-71C-151.6,13-152.6,11.9-153.9,11.9z"/>
<path d="M-132.6,11.9c-1.3,0-2.2,1.1-2.2,2.6v71c0,1.5,1,2.6,2.2,2.6c1.4,0,2.2-1.1,2.2-2.6v-71C-130.4,13-131.4,11.9-132.6,11.9z"/>
<path d="M282.2,20.1c-1.3,0-2.2,1.1-2.2,2.6v54.5c0,1.5,1,2.6,2.2,2.6c1.3,0,2.2-1.2,2.2-2.6V22.7
C284.4,21.2,283.4,20.1,282.2,20.1z"/>
<path d="M314.2,11.9c-1.3,0-2.2,1.1-2.2,2.6v71c0,1.5,1,2.6,2.2,2.6c1.2,0,2.2-1.1,2.2-2.6v-71C316.4,13,315.4,11.9,314.2,11.9z"/>
<path d="M292.7,0c-1.3,0-2.2,1.1-2.2,2.6v94.8c0,1.5,1,2.6,2.2,2.6c1.4-0.1,2.2-1.3,2.2-2.6V2.6C294.9,1.1,294,0,292.7,0z"/>
<path d="M303.4,20.1c-1.3,0-2.2,1.1-2.2,2.6v54.5c0,1.5,1,2.6,2.2,2.6c1.3,0,2.2-1.2,2.2-2.6V22.7
C305.7,21.2,304.7,20.1,303.4,20.1z"/>
<path d="M324.7,35.4c-1.3,0-2.2,1.1-2.2,2.6v23.8c0,1.5,1,2.6,2.2,2.6c1.3,0,2.2-1.2,2.2-2.6V38C326.9,36.5,325.9,35.4,324.7,35.4z"/>
<path d="M335.4,11.9c-1.3,0-2.2,1.1-2.2,2.6v71c0,1.5,1,2.6,2.2,2.6c1.2,0,2.2-1.1,2.2-2.6v-71C337.6,13,336.7,11.9,335.4,11.9z"/>
<path d="M367.2,20.1c-1.3,0-2.2,1.1-2.2,2.6v54.5c0,1.5,1,2.6,2.2,2.6c1.3,0,2.2-1.2,2.2-2.6V22.7
C369.4,21.2,368.5,20.1,367.2,20.1z"/>
<path d="M356.7,0c-1.3,0-2.2,1.1-2.2,2.6v94.8c0,1.5,1,2.6,2.2,2.6c1.2-0.1,2.2-1.3,2.2-2.6V2.6C358.9,1.1,357.9,0,356.7,0z"/>
<path d="M345.9,20.1c-1.3,0-2.2,1.1-2.2,2.6v54.5c0,1.5,1,2.6,2.2,2.6c1.3,0,2.2-1.2,2.2-2.6V22.7
C348.2,21.2,347.2,20.1,345.9,20.1z"/>
<path d="M388.5,35.4c-1.3,0-2.2,1.1-2.2,2.6v23.8c0,1.5,1,2.6,2.2,2.6c1.3,0,2.2-1.2,2.2-2.6V38C390.7,36.5,389.7,35.4,388.5,35.4z"/>
<path d="M401.4,24.7c0-1.5-1-2.6-2.2-2.6c-1.3,0-2.2,1.1-2.2,2.6v50.6c0,1.5,1,2.6,2.2,2.6c1.2-0.1,2.2-1.2,2.2-2.6"/>
<path d="M218.4,20.1c-1.3,0-2.2,1.1-2.2,2.6v54.5c0,1.5,1,2.6,2.2,2.6c1.3,0,2.2-1.2,2.2-2.6V22.7
C220.6,21.2,219.7,20.1,218.4,20.1z"/>
<path d="M377.9,11.9c-1.3,0-2.2,1.1-2.2,2.6v71c0,1.5,1,2.6,2.2,2.6c1.2,0,2.2-1.1,2.2-2.6v-71C380.1,13,379.2,11.9,377.9,11.9z"/>
<path d="M239.7,20.1c-1.3,0-2.2,1.1-2.2,2.6v54.5c0,1.5,1,2.6,2.2,2.6c1.3,0,2.2-1.2,2.2-2.6V22.7
C241.9,21.2,240.9,20.1,239.7,20.1z"/>
<path d="M228.9,0c-1.3,0-2.2,1.1-2.2,2.6v94.8c0,1.5,1,2.6,2.2,2.6c1.3-0.1,2.2-1.3,2.2-2.6V2.6C231.2,1.1,230.2,0,228.9,0z"/>
<path d="M260.9,35.4c-1.3,0-2.2,1.1-2.2,2.6v23.8c0,1.5,1,2.6,2.2,2.6c1.3,0,2.2-1.2,2.2-2.6V38C263.1,36.5,262.2,35.4,260.9,35.4z"/>
<path d="M250.2,11.9c-1.3,0-2.2,1.1-2.2,2.6v71c0,1.5,1,2.6,2.2,2.6s2.2-1.1,2.2-2.6v-71C252.4,13,251.4,11.9,250.2,11.9z"/>
<path d="M271.4,11.9c-1.3,0-2.2,1.1-2.2,2.6v71c0,1.5,1,2.6,2.2,2.6c1.4,0,2.2-1.1,2.2-2.6v-71C273.7,13,272.7,11.9,271.4,11.9z"/>
<animateTransform attributeName="transform" type="translate" from="0 0" to="-160 0" repeatCount="indefinite" dur="2.5s"/></g>
</svg>

我也希望这是纯SVG-没有JS解决方案请

Answer 1

您可以使用<use/>制作波浪的副本，并在波浪的右侧进行渲染。但是，您必须适当调整<animateTransform/>元素：

<animateTransform attributeName="transform" type="translate" from="0 0" to="-604.4 0" repeatCount="indefinite" dur="9.375s"/></g>
<use href="#waveform" x="604.4"/>