Есть несколько svg сердечек
<svg id="svg_2" width="640" height="480" viewbox="0 0 640 480" xmlns="http://www.w3.org/2000/svg">
<path d="m219.28949,21.827393c-66.240005,0 -119.999954,53.76001 -119.999954,120c0,134.755524 135.933151,170.08728 228.562454,303.308044c87.574219,-132.403381 228.5625,-172.854584 228.5625,-303.308044c0,-66.23999 -53.759888,-120 -120,-120c-48.047913,0 -89.401611,28.370422 -108.5625,69.1875c-19.160797,-40.817078 -60.514496,-69.1875 -108.5625,-69.1875z"/>
</svg>
Необходимо, чтобы при нажатии сердечко меняло цвет. Реализовал таким образом:
$('#svg_2').on('click', function(){
$(this).toggleClass('filled');
});
CSS-код
svg{
display: block;
width: 50px;
height: auto;
}
#svg_2{
fill:transparent;
stroke:#f00;
stroke-width:6px;
cursor:pointer;
transition:fill .3s;
}
#svg_2.filled{
fill:#f00;
}
Работает, но только на первый объект, игнорируя последующие. Как это можно исправить? https://jsfiddle.net/pq65rbdj/2/