如何在 SVG 进度条中为填充而不是路径设置动画

Question

我想将以下 SVG 用于捐赠页面。我想填满所有的心（不仅仅是边框），并让它从下往上填满。如何改变填充方向？

https://jsfiddle.net/kimmobrunfeldt/dnLLgm5o/

<div id="container">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 100 100">
              <path fill-opacity="0" stroke-width="1" stroke="#bbb" d="M81.495,13.923c-11.368-5.261-26.234-0.311-31.489,11.032C44.74,13.612,29.879,8.657,18.511,13.923  C6.402,19.539,0.613,33.883,10.175,50.804c6.792,12.04,18.826,21.111,39.831,37.379c20.993-16.268,33.033-25.344,39.819-37.379  C99.387,33.883,93.598,19.539,81.495,13.923z"/>
              <path id="heart-path" fill-opacity="0" stroke-width="3" stroke="#ED6A5A" d="M81.495,13.923c-11.368-5.261-26.234-0.311-31.489,11.032C44.74,13.612,29.879,8.657,18.511,13.923  C6.402,19.539,0.613,33.883,10.175,50.804c6.792,12.04,18.826,21.111,39.831,37.379c20.993-16.268,33.033-25.344,39.819-37.379  C99.387,33.883,93.598,19.539,81.495,13.923z"/>
          </svg>
</div>

// progressbar.js@1.0.0 version is used
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/

var bar = new ProgressBar.Path('#heart-path', {
easing: 'easeOut',
duration: 5400
});

bar.set(0);
bar.animate(1.0);  // Number from 0.0 to 1.0

谢谢。

Answer 1

你需要改变你的方法。据我所知，您使用的库只会让您为路径的 stroke（外部）设置动画。

您想为填充设置动画。可能最简单的方法是使用渐变。有关如何执行此操作的示例，请参阅 Custom SVG progress bar fill。

Answer 2

您可以使用口罩，并在捐款时将其从心脏底部向上移动。 [编辑]：包括一个用于动画填充的间隔计时器。请参见下面的示例：

<!DOCTYPE HTML>
<html>
<body>
<div style='width:200px;height:200px;'>
  <svg  x="0px" y="0px" viewBox="0 0 100 100" >
  <defs>
    <mask id="heart">
        <path fill=white d="M81.495,13.923c-11.368-5.261-26.234-0.311-31.489,11.032C44.74,13.612,29.879,8.657,18.511,13.923  C6.402,19.539,0.613,33.883,10.175,50.804c6.792,12.04,18.826,21.111,39.831,37.379c20.993-16.268,33.033-25.344,39.819-37.379  C99.387,33.883,93.598,19.539,81.495,13.923z"/>
    </mask>
</defs>
  <rect id=heartRect x=0 y="100%"  fill=red width="100%" height="100%"  mask="url(#heart)" />
  <path id=heartPath stroke="red" fill=none stroke-width=3 d="M81.495,13.923c-11.368-5.261-26.234-0.311-31.489,11.032C44.74,13.612,29.879,8.657,18.511,13.923  C6.402,19.539,0.613,33.883,10.175,50.804c6.792,12.04,18.826,21.111,39.831,37.379c20.993-16.268,33.033-25.344,39.819-37.379  C99.387,33.883,93.598,19.539,81.495,13.923z"/>
  </svg>
</div>
 <button onClick=donateAnimate()>Donate Animate()</button>
 <script>
//---button---
function donateAnimate()
{
var iT = setInterval(donate, 50 )
var Donations=0
function donate()
{
     if(Donations>=1)
    clearInterval(iT);
    var bb=heartPath.getBBox()
    var bby=bb.y
    var bbh=bb.height
    //---bottom of heart---
    var heartBase=bby+bbh

    if(Donations<1)
    {
        Donations+=.05
        var percent=(1-Donations)*heartBase
        heartRect.setAttribute("y",percent)
    }

}

}
 </script>
</body>
</html>

Answer 3

<div id="container">
  <svg xmlns="http://www.w3.org/2000/svg" id="heart-path" fill="red" version="1.1" x="0px" y="0px" viewBox="0 0 100 100">

                  <path fill-opacity="0" stroke-width="1" stroke="#bbb" d="M81.495,13.923c-11.368-5.261-26.234-0.311-31.489,11.032C44.74,13.612,29.879,8.657,18.511,13.923  C6.402,19.539,0.613,33.883,10.175,50.804c6.792,12.04,18.826,21.111,39.831,37.379c20.993-16.268,33.033-25.344,39.819-37.379  C99.387,33.883,93.598,19.539,81.495,13.923z"/>
                  <path id="heart-path1"  stroke-width="3" stroke="#ED6A5A" d="M81.495,13.923c-11.368-5.261-26.234-0.311-31.489,11.032C44.74,13.612,29.879,8.657,18.511,13.923  C6.402,19.539,0.613,33.883,10.175,50.804c6.792,12.04,18.826,21.111,39.831,37.379c20.993-16.268,33.033-25.344,39.819-37.379  C99.387,33.883,93.598,19.539,81.495,13.923z"/>

                  <defs style="display: none ! important;">
                  <symbol id="heart">
                    <path d="M12 21.35l-1.45-1.32c-5.15-4.67-8.55-7.75-8.55-11.53 0-3.08 2.42-5.5 5.5-5.5 1.74 0 3.41.81 4.5 2.09 1.09-1.28 2.76-2.09 4.5-2.09 3.08 0 5.5 2.42 5.5 5.5 0 3.78-3.4 6.86-8.55 11.54l-1.45 1.31z"/>
                  </symbol>
                </defs>
                <use xlink:href="#heart-path1" x="0" y="0" fill="red"/>
              </svg>
</div>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="576">
  <defs style="display: none ! important;">
    <symbol id="heart">
      <path d="M12 21.35l-1.45-1.32c-5.15-4.67-8.55-7.75-8.55-11.53 0-3.08 2.42-5.5 5.5-5.5 1.74 0 3.41.81 4.5 2.09 1.09-1.28 2.76-2.09 4.5-2.09 3.08 0 5.5 2.42 5.5 5.5 0 3.78-3.4 6.86-8.55 11.54l-1.45 1.31z"/>
    </symbol>
  </defs>
  <use xlink:href="#heart" x="0" y="0" fill="red"/>
  <use xlink:href="#heart" x="0" y="24" fill="orange"/>
  <use xlink:href="#heart" x="0" y="48" fill="yellow"/>
  <use xlink:href="#heart" x="0" y="72" fill="green"/>
  <use xlink:href="#heart" x="0" y="96" fill="blue"/>
  <use xlink:href="#heart" x="0" y="120" fill="indigo"/>
  <use xlink:href="#heart" x="0" y="144" fill="violet"/>
  <use xlink:href="#heart" x="0" y="168" fill="cyan"/>
  <use xlink:href="#heart" x="0" y="192" fill="magenta"/>
  <use xlink:href="#heart" x="0" y="216" fill="lime"/>
  <use xlink:href="#heart" x="0" y="240" fill="olive"/>
  <use xlink:href="#heart" x="0" y="264" fill="maroon"/>
  <use xlink:href="#heart" x="0" y="288" fill="purple"/>
  <use xlink:href="#heart" x="0" y="312" fill="#fff"/>
  <use xlink:href="#heart" x="0" y="336" fill="#e5e5e5"/>
  <use xlink:href="#heart" x="0" y="360" fill="#ccc"/>
  <use xlink:href="#heart" x="0" y="384" fill="#b2b2b2"/>
  <use xlink:href="#heart" x="0" y="408" fill="#999"/>
  <use xlink:href="#heart" x="0" y="432" fill="#7f7f7f"/>
  <use xlink:href="#heart" x="0" y="456" fill="#666"/>
  <use xlink:href="#heart" x="0" y="480" fill="#4c4c4c"/>
  <use xlink:href="#heart" x="0" y="504" fill="#333"/>
  <use xlink:href="#heart" x="0" y="528" fill="#191919"/>
  <use xlink:href="#heart" x="0" y="552" fill="#000"/>
</svg>

请检查一下，这对你有帮助。

https://jsfiddle.net/obw4asLy/1/

如何在 SVG 进度条中为填充而不是路径设置动画

How to animate fill instead of path in an SVG progress bar

javascript

css

svg

svg-animate

svg-filters