Анимация SVG path fill bottom-top

Question

У меня есть SVG с несколькими путями, которые я пытаюсь оживить. Моя цель - иметь анимацию, которая медленно заполняет цвет снизу вверх с разными цветами на каждом пути.

Я пробовал играть с lineargradient, но не мог понять, как использовать его с помощью путей.

Я создал следующий 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> 

Так синий будет медленно заполняться от дна к вершине, а затем розовый начнет снизу вверх, а также.

** EDIT: Я нашел следующий пример - но, как упоминалось выше шахты имеет пути так нужна работа вокруг, что, если это возможно

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> 

Спасибо.

Answer 1

Для тех, кого это касается, я нашел решение (не уверен, что это самый чистый способ сделать это или нет, но тем не менее).

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> 

** Примечание: Путь SVG получил немного перепутались (и я не чувствую, как очистка его), но код анимации будет одинаковым независимо.