SVG動畫不能正常重複

Question

我在使SVG圖標正確重複時遇到了一些困難。我需要他們像個gif一樣重複地，無限地重複。我只能得到兩個工作，但我需要所有三個一個接一個地重複。這裏是一個js小提琴的動畫SVG。下面

https://jsfiddle.net/allanberlin/cma0ejkw/

<svg version="1.1" id="Layer_1" class="loader" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"> 

<g> 
    <path fill="#FFFFFF" d="M46.5,68.5c-2.3,0-4.3-0.8-5.8-2.2l-7.1-7.2c0,0,0,0-0.1-0.1l0,0c-1.4-1.5-2.2-3.6-2.1-6.1 
     c0.2-7,6.9-15.7,14.8-19.7c5.3-2.6,10.1-2.5,12.9,0.2l0.1,0.1l0.1,0.1l7,7.2c0.3,0.3,0.7,0.8,0.9,1.2l0,0c0.8,1.3,1.2,3,1.2,4.9 
     c-0.2,7-6.9,15.8-14.8,19.7C51.1,67.9,48.7,68.5,46.5,68.5z M39.5,61.4l3.2,3.3c1.9,1.9,5.8,1.8,10-0.2c7-3.4,13.2-11.4,13.3-17.4 
     c0.1-1.4-0.2-2.5-0.8-3.4l0,0c-0.2-0.2-0.3-0.5-0.6-0.8l-3.1-3.2c0,0.1,0,0.2,0,0.2s0,0.2,0,0.3c-0.4,7-6.9,15.5-14.8,19.3l0,0 
     c-2.3,1.2-4.6,1.8-6.7,1.8l0,0C39.8,61.4,39.6,61.4,39.5,61.4z M35.5,57.4c0.3,0.3,0.7,0.6,1.1,0.8c0.2,0.1,0.3,0.2,0.5,0.2 
     c0.3,0.1,0.7,0.2,1,0.2c0.2,0,0.4,0.1,0.7,0.1c1.1-6.7,7.3-14.4,14.6-18c1.8-0.9,3.8-1.5,5.4-1.8c-0.1-1.3-0.5-2.4-1.2-3.2 
     c0,0-0.1,0-0.1-0.1c-1.9-2-5.8-1.9-10.1,0.2c-7,3.4-13.2,11.4-13.3,17.4C34.1,54.9,34.5,56.4,35.5,57.4L35.5,57.4z M58.6,41.5 
     c-1.3,0.2-2.7,0.8-4.1,1.4c-6.4,3.1-11.9,9.8-13.1,15.6c1.3-0.3,2.7-0.8,4.1-1.4l0,0C52,54,57.5,47.3,58.6,41.5z"/> 
    <animate id="Circle" attributeName="visibility" from="hidden" to="visable" dur="1s" begin="0s; Mona.end"/> 
</g> 

<g> 
    <path fill="#FFFFFF" d="M43.2,70.2l-16.1-8l21.4-32.5l24.3,35.2L43.2,70.2z M49.3,35.6l-4.4,31.7l23.4-4.2L49.3,35.6z M30.8,61.2 
    L42.3,67l4.1-29.3L30.8,61.2z"/> 
     <animate id="Triangle" attributeName="visibility" from="hidden" to="visable" dur="1s" begin="2s; Circle.begin+1s"/> 
</g> 


<g> 
     <path fill="#FFFFFF" d="M42.6,68l-20.2-7.1l0.5-1.2c0.3-0.5,5.2-12.5,7.1-16.6l0.2-0.3c1.1-2.4,2.7-5.8,5.7-5.8 
c0.4,0,0.8,0.1,1.2,0.2l0,0l0.2,0.1l9.2,3.2c1,0.3,2.1-0.1,2.5-1.1c0.3-0.6,0.5-1.1,0.6-1.3l0.2-0.3c1.1-2.4,2.7-5.8,5.7-5.8l0,0 
c0.5,0,1,0.1,1.4,0.2l1.3,0.4l0,0l16.4,5.8c1.8,0.6,2.9,2.4,2.8,4.8c-0.2,1.9-0.6,3.3-1.2,4.9l-0.4,1.2l-5.2-1.8 
c-1-0.3-2.1,0.1-2.5,1.1c-1.9,4.4-4.9,11.3-4.9,11.4l-0.2,0.3c-1,2.1-2.2,4.6-5.1,3.9l0,0c0,0-0.1,0-0.4-0.2l0,0 
c-0.1,0-0.1-0.1-0.2-0.1c-0.9-0.3-3.3-1.2-9.8-3.5c-1-0.3-2.1,0.1-2.5,1.1C44,64.6,43,66.9,43,66.9L42.6,68z M27.9,60.1l11.5,4 
c1,0.3,2.1-0.1,2.5-1.1c0.6-1.4,1.4-3.3,2.2-5.2l0,0c0.1-0.2,0.2-0.3,0.2-0.5l0.3-0.6l0,0c1.1-2.7,2.4-5.8,3.2-7.4l0.2-0.3 
c0.4-0.7,0.8-1.6,1.2-2.4c0.6-1.1,0.1-2.4-1-2.9l-11.5-4c-0.2-0.1-0.3-0.1-0.6-0.1c-1.5,0-2.6,2.3-3.4,4.2l-0.2,0.3 
c-1.3,2.7-4.1,9.3-5.8,13.3C26.2,58.5,26.8,59.7,27.9,60.1z M58.8,61.8c0.7,0.2,1.1-0.3,2.2-2.5l0.2-0.2c0-0.1,4.8-11.3,6.2-14.2 
l0,0l0,0l0,0l0,0l0.5-1.1l0,0c0.3-0.7,0.7-1.5,1.1-2.2c0.6-1.1,0.1-2.4-1-2.8l-11.5-4c-0.2-0.1-0.3-0.1-0.6-0.1l0,0 
c-1.5,0-2.6,2.3-3.4,4.2l-0.2,0.3c-0.1,0.1-0.2,0.4-0.4,0.8c-0.5,1.1,0.1,2.3,1.2,2.6l2.4,0.8l0,0c0.5,0.2,1,0.5,1.3,0.8 
c0.9,0.9,1.4,2.5,1.4,4.5L58,59.3c0,0.7,0.2,1.9,0.7,2.2C58.6,61.7,58.7,61.7,58.8,61.8z M47.8,55.6c-0.5,1.1,0.1,2.3,1.2,2.7 
c2,0.7,4.4,1.5,6.3,2.2c-0.1-0.6-0.1-1-0.1-1.2l0.1-10.5c0-1.2-0.3-2.2-0.7-2.7c-0.1-0.1-0.2-0.2-0.4-0.2l0,0l0,0 
c-0.2-0.1-0.3-0.1-0.6-0.1c-1.5,0-2.6,2.3-3.4,4.2L50,50.4C49.5,51.6,48.7,53.6,47.8,55.6z M72.3,45.3L72.3,45.3 
c1.2,0.4,2.4-0.3,2.6-1.5c0-0.2,0.1-0.5,0.1-0.7c0.1-0.7,0-1.8-1-2.2l0,0c-0.2-0.1-0.4-0.1-0.7-0.1l0,0c-0.8,0-1.4,0.7-2,1.5 
C70.6,43.4,71.1,44.8,72.3,45.3z"/> 
    <animate id="Mona" attributeName="visibility" from="hidden" to="visable" dur="1s" begin="3s; Triangle.begin+1s"/> 
</g> 

</svg> 

Answer 1

可見代碼有兩個我的，沒有一個。

你真的想讓所有的東西一下子出現嗎？如果不按照我所做的那樣使組默認隱藏。

body { 
 
    background-color: #aad5df; 
 
}

<svg version="1.1" id="Layer_1" class="loader" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
\t viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"> 
 
      
 
<g visibility="hidden"> 
 
\t <path fill="#FFFFFF" d="M46.5,68.5c-2.3,0-4.3-0.8-5.8-2.2l-7.1-7.2c0,0,0,0-0.1-0.1l0,0c-1.4-1.5-2.2-3.6-2.1-6.1 
 
\t \t c0.2-7,6.9-15.7,14.8-19.7c5.3-2.6,10.1-2.5,12.9,0.2l0.1,0.1l0.1,0.1l7,7.2c0.3,0.3,0.7,0.8,0.9,1.2l0,0c0.8,1.3,1.2,3,1.2,4.9 
 
\t \t c-0.2,7-6.9,15.8-14.8,19.7C51.1,67.9,48.7,68.5,46.5,68.5z M39.5,61.4l3.2,3.3c1.9,1.9,5.8,1.8,10-0.2c7-3.4,13.2-11.4,13.3-17.4 
 
\t \t c0.1-1.4-0.2-2.5-0.8-3.4l0,0c-0.2-0.2-0.3-0.5-0.6-0.8l-3.1-3.2c0,0.1,0,0.2,0,0.2s0,0.2,0,0.3c-0.4,7-6.9,15.5-14.8,19.3l0,0 
 
\t \t c-2.3,1.2-4.6,1.8-6.7,1.8l0,0C39.8,61.4,39.6,61.4,39.5,61.4z M35.5,57.4c0.3,0.3,0.7,0.6,1.1,0.8c0.2,0.1,0.3,0.2,0.5,0.2 
 
\t \t c0.3,0.1,0.7,0.2,1,0.2c0.2,0,0.4,0.1,0.7,0.1c1.1-6.7,7.3-14.4,14.6-18c1.8-0.9,3.8-1.5,5.4-1.8c-0.1-1.3-0.5-2.4-1.2-3.2 
 
\t \t c0,0-0.1,0-0.1-0.1c-1.9-2-5.8-1.9-10.1,0.2c-7,3.4-13.2,11.4-13.3,17.4C34.1,54.9,34.5,56.4,35.5,57.4L35.5,57.4z M58.6,41.5 
 
\t \t c-1.3,0.2-2.7,0.8-4.1,1.4c-6.4,3.1-11.9,9.8-13.1,15.6c1.3-0.3,2.7-0.8,4.1-1.4l0,0C52,54,57.5,47.3,58.6,41.5z" /> 
 
    <animate id="Circle" attributeName="visibility" from="hidden" to="visible" dur="1s" begin="0s; Mona.end"/> 
 
</g> 
 
<g visibility="hidden"> 
 
    <path fill="#FFFFFF" d="M43.2,70.2l-16.1-8l21.4-32.5l24.3,35.2L43.2,70.2z M49.3,35.6l-4.4,31.7l23.4-4.2L49.3,35.6z M30.8,61.2 
 
\t L42.3,67l4.1-29.3L30.8,61.2z"/> 
 
     <animate id="Triangle" from="hidden" to="visible" dur="1s" attributeName="visibility" begin="Circle.begin+1s"/> 
 
</g> 
 

 

 
<g visibility="hidden"> 
 
     <path fill="#FFFFFF" d="M42.6,68l-20.2-7.1l0.5-1.2c0.3-0.5,5.2-12.5,7.1-16.6l0.2-0.3c1.1-2.4,2.7-5.8,5.7-5.8 
 
c0.4,0,0.8,0.1,1.2,0.2l0,0l0.2,0.1l9.2,3.2c1,0.3,2.1-0.1,2.5-1.1c0.3-0.6,0.5-1.1,0.6-1.3l0.2-0.3c1.1-2.4,2.7-5.8,5.7-5.8l0,0 
 
c0.5,0,1,0.1,1.4,0.2l1.3,0.4l0,0l16.4,5.8c1.8,0.6,2.9,2.4,2.8,4.8c-0.2,1.9-0.6,3.3-1.2,4.9l-0.4,1.2l-5.2-1.8 
 
c-1-0.3-2.1,0.1-2.5,1.1c-1.9,4.4-4.9,11.3-4.9,11.4l-0.2,0.3c-1,2.1-2.2,4.6-5.1,3.9l0,0c0,0-0.1,0-0.4-0.2l0,0 
 
c-0.1,0-0.1-0.1-0.2-0.1c-0.9-0.3-3.3-1.2-9.8-3.5c-1-0.3-2.1,0.1-2.5,1.1C44,64.6,43,66.9,43,66.9L42.6,68z M27.9,60.1l11.5,4 
 
c1,0.3,2.1-0.1,2.5-1.1c0.6-1.4,1.4-3.3,2.2-5.2l0,0c0.1-0.2,0.2-0.3,0.2-0.5l0.3-0.6l0,0c1.1-2.7,2.4-5.8,3.2-7.4l0.2-0.3 
 
c0.4-0.7,0.8-1.6,1.2-2.4c0.6-1.1,0.1-2.4-1-2.9l-11.5-4c-0.2-0.1-0.3-0.1-0.6-0.1c-1.5,0-2.6,2.3-3.4,4.2l-0.2,0.3 
 
c-1.3,2.7-4.1,9.3-5.8,13.3C26.2,58.5,26.8,59.7,27.9,60.1z M58.8,61.8c0.7,0.2,1.1-0.3,2.2-2.5l0.2-0.2c0-0.1,4.8-11.3,6.2-14.2 
 
l0,0l0,0l0,0l0,0l0.5-1.1l0,0c0.3-0.7,0.7-1.5,1.1-2.2c0.6-1.1,0.1-2.4-1-2.8l-11.5-4c-0.2-0.1-0.3-0.1-0.6-0.1l0,0 
 
c-1.5,0-2.6,2.3-3.4,4.2l-0.2,0.3c-0.1,0.1-0.2,0.4-0.4,0.8c-0.5,1.1,0.1,2.3,1.2,2.6l2.4,0.8l0,0c0.5,0.2,1,0.5,1.3,0.8 
 
c0.9,0.9,1.4,2.5,1.4,4.5L58,59.3c0,0.7,0.2,1.9,0.7,2.2C58.6,61.7,58.7,61.7,58.8,61.8z M47.8,55.6c-0.5,1.1,0.1,2.3,1.2,2.7 
 
c2,0.7,4.4,1.5,6.3,2.2c-0.1-0.6-0.1-1-0.1-1.2l0.1-10.5c0-1.2-0.3-2.2-0.7-2.7c-0.1-0.1-0.2-0.2-0.4-0.2l0,0l0,0 
 
c-0.2-0.1-0.3-0.1-0.6-0.1c-1.5,0-2.6,2.3-3.4,4.2L50,50.4C49.5,51.6,48.7,53.6,47.8,55.6z M72.3,45.3L72.3,45.3 
 
c1.2,0.4,2.4-0.3,2.6-1.5c0-0.2,0.1-0.5,0.1-0.7c0.1-0.7,0-1.8-1-2.2l0,0c-0.2-0.1-0.4-0.1-0.7-0.1l0,0c-0.8,0-1.4,0.7-2,1.5 
 
C70.6,43.4,71.1,44.8,72.3,45.3z"/> 
 
    <animate id="Mona" attributeName="visibility" from="hidden" to="visible" dur="1s" begin="Triangle.begin+1s"/> 
 
</g> 
 
      
 
</svg>

Answer 2

這裏的另一種方式做到這一點，但沒有閃爍。

body { 
 
    background-color: #aad5df; 
 
}

<svg version="1.1" id="Layer_1" class="loader" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
\t viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"> 
 
      
 
<g> 
 
\t <path fill="#FFFFFF" d="M46.5,68.5c-2.3,0-4.3-0.8-5.8-2.2l-7.1-7.2c0,0,0,0-0.1-0.1l0,0c-1.4-1.5-2.2-3.6-2.1-6.1 
 
\t \t c0.2-7,6.9-15.7,14.8-19.7c5.3-2.6,10.1-2.5,12.9,0.2l0.1,0.1l0.1,0.1l7,7.2c0.3,0.3,0.7,0.8,0.9,1.2l0,0c0.8,1.3,1.2,3,1.2,4.9 
 
\t \t c-0.2,7-6.9,15.8-14.8,19.7C51.1,67.9,48.7,68.5,46.5,68.5z M39.5,61.4l3.2,3.3c1.9,1.9,5.8,1.8,10-0.2c7-3.4,13.2-11.4,13.3-17.4 
 
\t \t c0.1-1.4-0.2-2.5-0.8-3.4l0,0c-0.2-0.2-0.3-0.5-0.6-0.8l-3.1-3.2c0,0.1,0,0.2,0,0.2s0,0.2,0,0.3c-0.4,7-6.9,15.5-14.8,19.3l0,0 
 
\t \t c-2.3,1.2-4.6,1.8-6.7,1.8l0,0C39.8,61.4,39.6,61.4,39.5,61.4z M35.5,57.4c0.3,0.3,0.7,0.6,1.1,0.8c0.2,0.1,0.3,0.2,0.5,0.2 
 
\t \t c0.3,0.1,0.7,0.2,1,0.2c0.2,0,0.4,0.1,0.7,0.1c1.1-6.7,7.3-14.4,14.6-18c1.8-0.9,3.8-1.5,5.4-1.8c-0.1-1.3-0.5-2.4-1.2-3.2 
 
\t \t c0,0-0.1,0-0.1-0.1c-1.9-2-5.8-1.9-10.1,0.2c-7,3.4-13.2,11.4-13.3,17.4C34.1,54.9,34.5,56.4,35.5,57.4L35.5,57.4z M58.6,41.5 
 
\t \t c-1.3,0.2-2.7,0.8-4.1,1.4c-6.4,3.1-11.9,9.8-13.1,15.6c1.3-0.3,2.7-0.8,4.1-1.4l0,0C52,54,57.5,47.3,58.6,41.5z" visibility="hidden"> 
 
     <set id="Circle" attributeName="visibility" attributeType="CSS" to="visible" 
 
      begin="0s; Mona.end" dur="1s" fill="freeze"/> 
 
     <set attributeName="visibility" attributeType="CSS" to="hidden" 
 
      begin="Circle.end" fill="freeze"/> 
 
    </path> 
 
</g> 
 
    
 
<g> 
 
    <path fill="#FFFFFF" d="M43.2,70.2l-16.1-8l21.4-32.5l24.3,35.2L43.2,70.2z M49.3,35.6l-4.4,31.7l23.4-4.2L49.3,35.6z M30.8,61.2 
 
\t L42.3,67l4.1-29.3L30.8,61.2z" visibility="hidden"> 
 
     <set id="Triangle" attributeName="visibility" attributeType="CSS" to="visible" 
 
      begin="Circle.end" dur="1s" fill="freeze"/> 
 
     <set attributeName="visibility" attributeType="CSS" to="hidden" 
 
      begin="Triangle.end" fill="freeze"/> 
 
    </path> 
 
</g> 
 

 

 
<g> 
 
     <path fill="#FFFFFF" d="M42.6,68l-20.2-7.1l0.5-1.2c0.3-0.5,5.2-12.5,7.1-16.6l0.2-0.3c1.1-2.4,2.7-5.8,5.7-5.8 
 
c0.4,0,0.8,0.1,1.2,0.2l0,0l0.2,0.1l9.2,3.2c1,0.3,2.1-0.1,2.5-1.1c0.3-0.6,0.5-1.1,0.6-1.3l0.2-0.3c1.1-2.4,2.7-5.8,5.7-5.8l0,0 
 
c0.5,0,1,0.1,1.4,0.2l1.3,0.4l0,0l16.4,5.8c1.8,0.6,2.9,2.4,2.8,4.8c-0.2,1.9-0.6,3.3-1.2,4.9l-0.4,1.2l-5.2-1.8 
 
c-1-0.3-2.1,0.1-2.5,1.1c-1.9,4.4-4.9,11.3-4.9,11.4l-0.2,0.3c-1,2.1-2.2,4.6-5.1,3.9l0,0c0,0-0.1,0-0.4-0.2l0,0 
 
c-0.1,0-0.1-0.1-0.2-0.1c-0.9-0.3-3.3-1.2-9.8-3.5c-1-0.3-2.1,0.1-2.5,1.1C44,64.6,43,66.9,43,66.9L42.6,68z M27.9,60.1l11.5,4 
 
c1,0.3,2.1-0.1,2.5-1.1c0.6-1.4,1.4-3.3,2.2-5.2l0,0c0.1-0.2,0.2-0.3,0.2-0.5l0.3-0.6l0,0c1.1-2.7,2.4-5.8,3.2-7.4l0.2-0.3 
 
c0.4-0.7,0.8-1.6,1.2-2.4c0.6-1.1,0.1-2.4-1-2.9l-11.5-4c-0.2-0.1-0.3-0.1-0.6-0.1c-1.5,0-2.6,2.3-3.4,4.2l-0.2,0.3 
 
c-1.3,2.7-4.1,9.3-5.8,13.3C26.2,58.5,26.8,59.7,27.9,60.1z M58.8,61.8c0.7,0.2,1.1-0.3,2.2-2.5l0.2-0.2c0-0.1,4.8-11.3,6.2-14.2 
 
l0,0l0,0l0,0l0,0l0.5-1.1l0,0c0.3-0.7,0.7-1.5,1.1-2.2c0.6-1.1,0.1-2.4-1-2.8l-11.5-4c-0.2-0.1-0.3-0.1-0.6-0.1l0,0 
 
c-1.5,0-2.6,2.3-3.4,4.2l-0.2,0.3c-0.1,0.1-0.2,0.4-0.4,0.8c-0.5,1.1,0.1,2.3,1.2,2.6l2.4,0.8l0,0c0.5,0.2,1,0.5,1.3,0.8 
 
c0.9,0.9,1.4,2.5,1.4,4.5L58,59.3c0,0.7,0.2,1.9,0.7,2.2C58.6,61.7,58.7,61.7,58.8,61.8z M47.8,55.6c-0.5,1.1,0.1,2.3,1.2,2.7 
 
c2,0.7,4.4,1.5,6.3,2.2c-0.1-0.6-0.1-1-0.1-1.2l0.1-10.5c0-1.2-0.3-2.2-0.7-2.7c-0.1-0.1-0.2-0.2-0.4-0.2l0,0l0,0 
 
c-0.2-0.1-0.3-0.1-0.6-0.1c-1.5,0-2.6,2.3-3.4,4.2L50,50.4C49.5,51.6,48.7,53.6,47.8,55.6z M72.3,45.3L72.3,45.3 
 
c1.2,0.4,2.4-0.3,2.6-1.5c0-0.2,0.1-0.5,0.1-0.7c0.1-0.7,0-1.8-1-2.2l0,0c-0.2-0.1-0.4-0.1-0.7-0.1l0,0c-0.8,0-1.4,0.7-2,1.5 
 
C70.6,43.4,71.1,44.8,72.3,45.3z" visibility="hidden"> 
 
     <set id="Mona" attributeName="visibility" attributeType="CSS" to="visible" 
 
      begin="Triangle.end" dur="1s" fill="freeze"/> 
 
     <set attributeName="visibility" attributeType="CSS" to="hidden" 
 
      begin="Mona.end" fill="freeze"/> 
 
    </path> 
 
</g> 
 
      
 
</svg>