Javascript 使用CSS沿路径设置SVG填充的动画

我已经看到了很多关于如何制作彩色的完整对象动画的问题和答案。但是，是否可以通过填充（路径的内部）为锐利、移动的颜色块设置动画？如何制作这样的SVG动画？

有两个Javascript库可以查看：或者……应该为您指明正确的方向

这只是一段快速的代码，告诉你snap是如何工作的。我将给您一个senario，您希望在其中更改悬停时svg的填充

<svg id="targetSvg" ...>
    <!-- path forming the upper shell -->
    <g>
    <path id="1" fill="#000" d="..."/>
    <path id="2" fill="#fff" d="..."/>
    <path id="3" fill="#000" d="..."/>
    </g>
</svg>

Css样式

.fadein {
   transition: fill 1s linear;
   fill:blue;
}

.fadeout {
   transition: fill 1s linear;
}

---

如果你使用多个梯度站，你可以得到尖锐的边缘。试着在谷歌上搜索。我认为没有人完全理解你想要什么。你能嵌入（或链接）一张图片吗？@Paulie\u D我只是想给他指出正确的方向。但是你要明白你的意思。有时，试图帮助别人会让你付出更多的代价。我知道，将整个SVG或路径淡入不同的颜色时，很容易设置颜色变化的动画，但如何设置路径上颜色变化的动画？比如，如果你想让一条不同颜色的蛇穿过路径的内部。是我和SVG玩的时候遇到的一个密码笔。这应该会有所帮助。

.fadein {
   transition: fill 1s linear;
   fill:blue;
}

.fadeout {
   transition: fill 1s linear;
}