Animation 如何用百分比填充自定义SVG形状？

下面的代码包含一个矩形，可以用百分比填充，并根据Stack Overflow中的示例代码以矩形的形式相加：

然而，我们需要在桶中装满百分比

桶形是使用SVG绘制的

这里的总体思路是，无论添加了多少百分比，都将填充该量，在这种情况下，桶中的水百分比：

已对代码进行了修改，以便将fill=“url（#lg）”包含在桶形中，以便具有与矩形相同的功能，但这不起作用

---

只有当形状轮廓闭合时，才可能使用渐变填充

也就是说，必须使用

路径

，

多段线

，

多边形

绘制形状轮廓，但不能使用多条

线

我在矢量编辑器中重新绘制了一个桶，其中将填充渐变（水）的内部体积

class=“bucket\u body”

具有连续的轮廓

我还删除了嵌套的svg标记，因为我认为它们是多余的

渐变填充动画取自您提供的

var count=$（'#count'）；
$（{Counter:0}）.animate（{Counter:count.text（）}{
持续时间：10000，
“线性”，
步骤：函数（）{
count.text（Math.ceil（this.Counter）+“%”；
}
});
.s0{
填充：无；
笔画宽度：2.5；
行程：#000；
}
.s1{
填充：无；
不透明度：0.5；
笔划线头：圆形；
笔画宽度：5；
行程：#2F2D1F；
}
.s2{
填充：无；
笔划线头：圆形；
笔画宽度：5；
行程：#2F2D1F；
} 
.arc{
填充：无；
笔划线头：圆形；
笔画宽度：6；
行程：#2F2D1F；
}
.s4{
填充物：银；
笔画宽度：5；
笔画：黑色；
}
.桶顶{
填充：无；
笔画宽度：10；
笔画：黑色；
}  
.桶底{
填充：无；
笔画宽度：6；
笔画：黑色；
} 
.桶体{
笔画宽度：6；
笔画：黑色；
填写：url（#lg）；
}

请注意，已使用单个路径元素绘制了基本桶。您能否告知fill=“url（#lg）在代码中的位置，或者达到“百分比填充”效果的最佳方法？主题已解决，谢谢！解决方案可在以下链接找到：