Animieren SVG Pfad füllen unten-oben

Question

Ich habe ein SVG mit mehreren Pfaden, die ich versuche, die Füllung von zu animieren. Mein Ziel ist eine Animation, die die Farbe langsam von unten nach oben mit verschiedenen Farben in jedem Pfad füllt.

Ich habe versucht, mit lineargradient zu spielen, konnte aber nicht herausfinden, wie man es mit Pfaden verwendet.

Ich habe die folgende SVG:

https://jsfiddle.net/812x1tqu/

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    viewBox="0 0 148 148" style="enable-background:new 0 0 148 148;" xml:space="preserve"> 
<style type="text/css"> 
    .st0{fill:#0000FF;stroke:#000000;stroke-miterlimit:10;} 
    .st1{fill:#FF00FF;stroke:#000000;stroke-miterlimit:10;} 
</style> 
<g id="XMLID_1_"> 
    <path id="XMLID_4_" class="st0" d="M147.4,71.3L0.8,67.3c-0.2,2.2-0.3,4.4-0.3,6.7c0,40.6,32.9,73.5,73.5,73.5s73.5-32.9,73.5-73.5 
     C147.5,73.1,147.5,72.2,147.4,71.3z"/> 
    <path id="XMLID_3_" class="st1" d="M74,0.5C35.7,0.5,4.2,29.8,0.8,67.3l146.6,4.1C146.1,32,113.7,0.5,74,0.5z"/> 
</g> 
</svg> 

So ist die blau langsam von unten nach oben drauf, und dann wird die rosa beginnt von unten gefüllt werden würde auch nach oben.

** EDIT: ich folgendes Beispiel gefunden - aber wie oben erwähnt Mine hat Pfade so eine Arbeit benötigen um, wenn möglich

https://jsfiddle.net/ppy2ggpL/

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200"> 
     <linearGradient id="lg" x1="0.5" y1="1" x2="0.5" y2="0"> 
      <stop offset="0%" stop-opacity="1" stop-color="royalblue"/> 
      <stop offset="40%" stop-opacity="1" stop-color="royalblue"> 
      <animate attributeName="offset" values="0;1;0" repeatCount="indefinite" dur="10s" begin="0s"/> 
      </stop> 
      <stop offset="40%" stop-opacity="0" stop-color="royalblue"> 
      <animate attributeName="offset" values="0;1;0" repeatCount="indefinite" dur="10s" begin="0s"/> 
      </stop> 
      <stop offset="100%" stop-opacity="0" stop-color="royalblue"/> 
     </linearGradient> 
     <circle cx="50" cy="50" r="45" fill="url(#lg)" stroke="crimson" stroke-width="5"/> 
</svg> 

Danke.

Answer 1

Für die Interessenten habe ich die Lösung gefunden (nicht sicher, ob das der sauberste Weg ist oder nicht, aber niemals weniger).

https://jsfiddle.net/812x1tqu/1/

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    viewBox="0 0 148 148" style="enable-background:new 0 0 148 148;" xml:space="preserve"> 
<style type="text/css"> 
    .st0{stroke:#000;stroke-miterlimit:10;} 
    .st1{stroke:#000;stroke-miterlimit:10;} 
</style> 

<linearGradient id="blue-fill" x1="0.5" y1="1" x2="0.5" y2="0"> 
      <stop offset="100%" stop-opacity="1" stop-color="blue"> 
      <animate attributeName="offset" values="0;1" repeatCount="1" dur="3s" begin="0s"/> 
      </stop> 
      <stop offset="100%" stop-opacity="0" stop-color="blue"> 
      <animate attributeName="offset" values="0;1" repeatCount="1" dur="3s" begin="0s"/> 
      </stop> 

     </linearGradient> 

     <linearGradient id="pink-fill" x1="0.5" y1="1" x2="0.5" y2="0"> 
      <stop offset="0%" stop-opacity="0" stop-color="pink"> 
      <animate attributeName="offset" values="0;1" repeatCount="1" dur="3s" begin="3s" fill="freeze"/> 
      <animate attributeName="stop-opacity" values="0;1" repeatCount="1" dur="0.1s" begin="3s" fill="freeze"/> 

      </stop> 
      <stop offset="100%" stop-opacity="0" stop-color="pink"> 
      <animate attributeName="offset" values="0;1" repeatCount="1" dur="3s" begin="3s" fill="freeze" /> 
      <animate attributeName="stop-opacity" values="0;1" repeatCount="1" dur="3s" begin="6s" fill="freeze"/> 


      </stop> 

     </linearGradient> 


<g id="XMLID_1_"> 
    <path fill="url(#blue-fill)" id="XMLID_4_" class="st0" d="M147.4,71.3L0.8,67.3c-0.2,2.2-0.3,4.4-0.3,6.7c0,40.6,32.9,73.5,73 .5,73.5s73.5-32.9,73.5-73.5 
     C147.5,73.1,147.5,72.2,147.4,71.3z"/> 
    <path fill="url(#pink-fill)" id="XMLID_3_" class="st1" d="M74,0.5C35.7,0.5,4.2,29.8,0.8,67.3l146.6,4.1C146.1,32,113.7,0.5,74,0.5z"/> 
</g> 
</svg> 

** HINWEIS: Der SVG-Pfad wurde etwas verkorkste (und ich habe nicht das Gefühl, wie es oben Reinigung), aber die Animation Code wird das gleiche sein, unabhängig.