Html 如何为闭合的svg路径创建动画

我正在尝试创建动画，用动画填充封闭的路径

这是我的svg，它正在创建闭合路径：

<path fill="#000000" stroke="none" d="M238.281,174.573C248.449,182.844,238.12900000000002,206.155,231.52,212.05700000000002C200.11100000000002,240.12900000000002,134.22500000000002,267.20000000000005,108.39800000000001,227.258C93.47600000000001,204.17600000000002,101.91600000000001,168.55100000000002,114.97200000000001,146.37900000000002C116.486,143.92800000000003,118.766,145.484,117.98500000000001,147.34000000000003C98.50600000000001,185.34800000000004,111.37400000000001,227.41400000000004,159.306,221.95900000000003C181.185,219.30900000000003,209.638,208.14600000000004,227.34500000000003,195.38700000000003C229.59600000000003,193.76600000000002,232.37400000000002,191.73100000000002,233.86100000000002,190.31900000000002C221.52700000000002,185.90500000000003,190.156,189.51800000000003,184.19600000000003,173.717C181.19100000000003,165.74800000000002,187.25300000000001,149.83,191.19300000000004,141.62300000000002C204.02500000000003,114.91400000000002,232.57500000000005,89.94700000000002,246.48100000000005,109.65000000000002C249.32800000000006,113.77500000000002,251.90800000000004,135.63600000000002,245.71600000000007,135.63600000000002C242.66200000000006,131.55800000000002,239.34900000000007,124.93700000000003,233.48900000000006,124.93700000000003C218.73600000000005,125.04100000000003,197.39800000000005,138.88800000000003,194.57300000000006,151.45700000000002H194.58900000000006C193.58000000000007,155.217,196.46800000000005,160.871,199.48800000000006,163.04300000000003C209.489,170.251,229.978,167.669,238.281,174.573Z" stroke-width="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);fill: #fff;stroke: #000;" data-svg="path"></path>

这是我的路径代码

现在，我想用一种带有动画的颜色来填充闭合的路径，这种颜色看起来像是从路径的一个端点开始并在另一个端点结束的渐进填充。 我们尝试了raphaeljs，但任何其他js库也可以

---

感谢您的帮助。

正如罗伯特所说，线性渐变可能是一种方式。我只是想展示另一种可能的替代方法。通过使路径从需要图形起点的点开始，可以改善效果

与典型的路径行进相比，您的示例的一个问题是，形状的宽度可变，因此无法执行一些常用的技巧，如animatedasharray/offset。其他一些方法也可能不太管用，因为fill没有方向。线性梯度可能会有所帮助，但仍可能存在问题

另一种方法是使用剪辑或遮罩并设置动画

在本例中，使用“捕捉”，我们为相同的克隆元素创建了一个遮罩，找到长度，使笔划非常胖，以便遮罩包含多余的边界，然后设置笔划dashoffset动画以缓慢绘制线

它可以通过只使用一条路径来改进，该路径是所需的单笔划，而不是完全闭合的形状，并且还具有路径的起点，与所需的动画起点相同

var myPath=Snap'myPath'； var myPathClone=myPath.clone.attr{id:'myPathClone'}； attr{mask:myPathClone，fill:'red'}； var myPathLength=myPathClone.getTotalLength； myPathClone.attr{fill:'none'，stroke:'white'，strokeWidth:80，strokeDasharray:myPathLength+''+myPathLength，strokeDashoffset:myPathLength，stroke linecap:'round'}； myPathClone.animate{strokeDashoffset:0}，2000；

---

使用Raphaël 2.1.4创建，设置线性渐变作为填充，并设置渐变停止的动画。@RobertLongson你能帮我举一些例子吗？或者一些JSFIDLE示例将非常有用，我想如果您现在阅读线性渐变的工作原理会更好，我已经给了您一些提示。如果你尝试了，但遇到了问题，请更新问题，说明你已经走了多远。