如何在 CSS 中改变填充过渡的方向答案

【问题标题】：How to change the direction of a fill transition in CSS如何在 CSS 中改变填充过渡的方向
【发布时间】：2015-08-29 20:54:34
【问题描述】：

我正在努力确定是否可以使用 CSS 控制填充过渡的方向。

我正在使用无限循环内联 SVG 作为我想要制作动画的图标。

基本上我希望图标在悬停时改变颜色，但从底部中间开始并遵循无限循环的流程。

这是一个与我想要实现的效果非常相似的 GIF。

任何帮助或建议表示赞赏！

【问题讨论】：

标签： html css svg

【解决方案1】：

如果您使用的是 SVG 路径，那么一种可能的解决方案是使用 stroke-dasharray 和 stroke-dashoffset。

你能把你到目前为止所做的事情发布一下吗？

【讨论】：

我现在只有 SVG 标记并将其按比例缩小，标记中确实有一条路径为“st0”类
我们不能不看标记。使用您的 svg 标记发布 fiddle，以便我们查看问题
这里是 SVG 标记的一个小技巧，它只是通过悬停效果按比例缩小，将填充更改为所需的颜色。 jsfiddle.net/37x2r9nt/1 如果可能的话，我想要一些如何让填充从底部中心点开始并遵循循环的流程