Cara menganimasikan isian alih-alih jalur di bilah kemajuan SVG

Saya ingin menggunakan SVG berikut untuk halaman donasi. Saya ingin mengisi seluruh hati (bukan hanya batasnya), dan membuatnya terisi dari bawah ke atas. Bagaimana cara mengubah arah pengisian?

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

Terima kasih.


javascript svg css svg-animate svg-filters
person Shahar    schedule 08.03.2017    source sumber
comment
Kemungkinan duplikat dari Menguraikan dan mengisi sebagian Bentuk SVG   -  person Michael Mullany    schedule 08.03.2017

Jawaban (3)


arrow_upward
5
arrow_downward

Anda dapat menggunakan masker dan memindahkannya ke atas dari bawah ke jantung saat donasi dilakukan. [EDIT]: Termasuk pengatur waktu interval untuk menganimasikan pengisian. Lihat contoh di bawah ini:

<!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
itu luar biasa! bisakah saya mengisi hati dengan animasi? perlahan terisi? - person Shahar; 09.03.2017
comment
Saya menambahkan penghitung waktu interval untuk memulai ketika tombol dipilih. - 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="/id#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="/id#heart" x="0" y="0" fill="red"/>
  <use xlink:href="/id#heart" x="0" y="24" fill="orange"/>
  <use xlink:href="/id#heart" x="0" y="48" fill="yellow"/>
  <use xlink:href="/id#heart" x="0" y="72" fill="green"/>
  <use xlink:href="/id#heart" x="0" y="96" fill="blue"/>
  <use xlink:href="/id#heart" x="0" y="120" fill="indigo"/>
  <use xlink:href="/id#heart" x="0" y="144" fill="violet"/>
  <use xlink:href="/id#heart" x="0" y="168" fill="cyan"/>
  <use xlink:href="/id#heart" x="0" y="192" fill="magenta"/>
  <use xlink:href="/id#heart" x="0" y="216" fill="lime"/>
  <use xlink:href="/id#heart" x="0" y="240" fill="olive"/>
  <use xlink:href="/id#heart" x="0" y="264" fill="maroon"/>
  <use xlink:href="/id#heart" x="0" y="288" fill="purple"/>
  <use xlink:href="/id#heart" x="0" y="312" fill="#fff"/>
  <use xlink:href="/id#heart" x="0" y="336" fill="#e5e5e5"/>
  <use xlink:href="/id#heart" x="0" y="360" fill="#ccc"/>
  <use xlink:href="/id#heart" x="0" y="384" fill="#b2b2b2"/>
  <use xlink:href="/id#heart" x="0" y="408" fill="#999"/>
  <use xlink:href="/id#heart" x="0" y="432" fill="#7f7f7f"/>
  <use xlink:href="/id#heart" x="0" y="456" fill="#666"/>
  <use xlink:href="/id#heart" x="0" y="480" fill="#4c4c4c"/>
  <use xlink:href="/id#heart" x="0" y="504" fill="#333"/>
  <use xlink:href="/id#heart" x="0" y="528" fill="#191919"/>
  <use xlink:href="/id#heart" x="0" y="552" fill="#000"/>
</svg>

Silakan periksa, ini akan membantu Anda.

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

person iyyappan    schedule 09.03.2017

arrow_upward
1
arrow_downward

Anda perlu mengubah pendekatan Anda. Sejauh yang saya bisa lihat, perpustakaan yang Anda gunakan hanya memungkinkan Anda menganimasikan goresan (di luar) jalur.

Anda ingin menganimasikan isi. Mungkin cara paling sederhana adalah dengan gradien. Lihat Pengisian bilah kemajuan SVG khusus untuk contoh cara melakukan hal ini.

person Paul LeBeau    schedule 08.03.2017