动画SVG路径填充自底向上 [英] Animating SVG path fill bottom-top

问题描述

我有一个带有多个路径的SVG，我正在尝试为其填充动画。我的目标是制作一个动画，使每个路径中的颜色从下往上慢慢填充。

I have an SVG with multiple paths which I am trying to animate the fill of. My goal is to have an animation that fills up the color slowly from bottom to top with different colors in each path.

我尝试过使用lineargradient播放，但无法计算

I have tried playing with lineargradient but couldn't figure out how to use it with paths.

我创建了以下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 the blue would slowly get filled from bottom to the top of it, and then the pink will start from bottom to top as well.

**编辑：我发现了以下示例-但如上所述，我的路径已经存在，因此，如果可能的话，需要解决此问题

** I found the following example - but as mentioned above mine has paths so need a work around that if possible

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>

谢谢。

推荐答案

对于那些感兴趣的人，我已经找到了解决方案（不知道这是否是最干净的方法，但永远不会少）。

For those interested I have found the solution (not sure if that's the cleanest way to do it or not but never the less).

< a href = https://jsfiddle.net/812x1tqu/1/ rel = nofollow> 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路径有点混乱（我不想清理它）向上），但无论如何，动画代码都相同。

**NOTE: The SVG path got a little messed up (and I did not feel like cleaning it up) but the animation code will be the same regardless.

这篇关于动画SVG路径填充自底向上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！