Animation SVG avec CSS onclick

Question

Je dispose d'un bouton de cœur qui, lorsqu'il est cliqué, remplira le SVG de bas en haut et lorsqu'il est décliqué, désempilera le SVG de haut en bas. Voici ce que j'ai trouvé jusqu'à présent : JSFiddle

Je suis novice avec ce genre de techniques comme les keyframes et la chose de clip-path. Tout cela peut-il être fait uniquement via du CSS ?

body {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  height: 100vh;
}

.heart-container {
  position: relative;
  width: 40px;
  height: 40px;
}

.heart-clip {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  -webkit-clip-path: url(#svgPath);
          clip-path: url(#svgPath);
}
.heart-clip:hover {
  -webkit-animation: pulse .6s .3s infinite;
          animation: pulse .6s .3s infinite;
}
.heart-clip:hover::before {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}
.heart-clip::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #D32F2F;
  opacity: 0;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transition: opacity .2s linear, -webkit-transform .2s linear;
  transition: opacity .2s linear, -webkit-transform .2s linear;
  transition: transform .2s linear, opacity .2s linear;
  transition: transform .2s linear, opacity .2s linear, -webkit-transform .2s linear;
  -webkit-transform-origin: center 60%;
          transform-origin: center 60%;
}

.heart-stroke {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  fill: #D32F2F;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  30% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  60% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  30% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  60% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

toutes les alternatives et solutions sont grandement appréciées ! Merci d'avance !

Answer 1

Considérez le remplissage de couleur en utilisant les filtres feFlood et en animant en changeant l'attribut dy du filtre feoffset.
Les clics répétés changent la direction de l'animation de la couleur

var svg1 = document.getElementById("svg1"),
  close = document.getElementById('close'),
  open = document.getElementById("open");

let flag = true;

svg1.addEventListener('click', function() {
  if (flag == true) {
    close.beginElement();
    flag = false;
  } else {
    open.beginElement();
    flag = true;
  }
});