我想知道是否有一种方法可以将特定的图标或精灵填充到指定的百分比-即20％或类似的水平。我正在尝试创建可响应的形状或图像，以用作各种流体图表。我知道以下不是一个很好的例子-svg也是字体形式。我想将此图像动态填充到代码中的指定百分比。
因此，假设某个数据点的读数为20％，我希望心脏以最多20％的另一种颜色（例如颜色：＃DA1C5C）填充，剩下的颜色保留为原始颜色。我正在使用的代码使用的是直接图标字体，而不是图像svg，但尚未托管。
<div class="icon">
<i class="icon-doubleheart">
<img src="https://s3.amazonaws.com/yourcareassets/doubleheart.svg">
</i>