Как анимировать заливку вместо пути в индикаторе выполнения SVG

Я хочу использовать следующую 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>

// [email protected] 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

Спасибо.


javascript svg css svg-animate svg-filters
person Shahar    schedule 08.03.2017    source источник
comment
Возможный дубликат выделения и частичного заполнения формы SVG   -  person Michael Mullany    schedule 08.03.2017

Ответы (3)


arrow_upward
5
arrow_downward

Вы можете использовать маску и перемещать ее снизу вверх по сердцу по мере того, как делаются пожертвования. [РЕДАКТИРОВАТЬ]: Включен интервальный таймер для анимации заливки. См. пример ниже:

<!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>

person Francis Hemsher    schedule 08.03.2017
comment
это потрясающе! можно ли наполнить сердце анимацией? медленно заполняется? - person Shahar; 09.03.2017
comment
Я добавил интервальный таймер для запуска при выборе кнопки. - person Francis Hemsher; 09.03.2017

arrow_upward
2
arrow_downward 

<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/

person iyyappan    schedule 09.03.2017

arrow_upward
1
arrow_downward

Вам нужно будет изменить свой подход. Насколько я понимаю, используемая вами библиотека позволяет анимировать только обводку (снаружи) пути.

Вы хотите анимировать заливку. Вероятно, самый простой способ — с градиентом. См. Пользовательское заполнение индикатора выполнения SVG для примера того, как это сделать.

person Paul LeBeau    schedule 08.03.2017