javascript - SVG填充悬停效果与CSS，JS

我的 HTML5 页面上有内联 SVG 地图，我正在尝试对其进行动画处理。

我地图上的每个区域都有单独的路径。

我试图达到的效果是在悬停某个区域时填充区域路径动画。（示例：填充（颜色）从左到右）

使用 CSS 添加悬停效果很容易。（示例：定位路径类并使用填充 -> 目标：悬停 {填充：红色；}，但如果我添加 css 动画，由于某种原因它不起作用。

再次，我的目标是在将鼠标悬停在 region 上时为填充颜色设置动画，而不是stroke。

我看到很多关于为笔画设置动画的 tuts，但几乎没有 - 为路径颜色本身设置动画。

我也接受 JS 解决方案。我认为将clippath属性添加到svg路径有某种技巧吗？

我附上了带有更好解释的图像。

所以，让我们想象这是我的地图区域之一。它有自己的路径。

这是我想要达到的效果。（橙色填充例如从底部到顶部）

标签： javascripthtmlcsssvg