使用jquery仅将颜色填充到svg图标的某些部分

Question

嗨我想用基于百分比值的动画将颜色填充到自定义形状。 例如：如果我给percntage值为50，它会像下面的形状一样上升到50％。

我正在通过以下链接进行此任务。

但是当我使用另一个svg图标时它不起作用。 我的HTML代码是

<div class="icon">
    <div id='blackIcon' class="icon-doubleheart">
        <img src="https://s3.amazonaws.com/yourcareassets/doubleheart.svg"/>
    </div>
    <div id='holdci'>
        <div id='colorIcon' class="icon-doubleheart">
            <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">