使用 CSS 动画填充 SVG 路径元素答案

【问题标题】：Using CSS to animate the fill of SVG path elements使用 CSS 动画填充 SVG 路径元素
【发布时间】：2015-02-03 02:55:53
【问题描述】：

我有一个JSFiddle here。我使用walkway.js 为path 元素的绘图设置了动画效果，效果很好，但是在绘图完成后，我想为svg 的路径元素的填充设置动画。我尝试为路径提供以下 CSS：

path { 
transition: fill 2.0s linear !important;
}

在回调函数上（在.draw() 完成时执行）我通过应用类testClass 来更改路径fill 的值，如下所示：

.testClass {
    fill:black;
}

这不起作用 - 没有应用过渡，当调用回调时，它会立即“闪烁”黑色 - 根本没有淡入。同样的方法也适用于纯 html 元素，不涉及 SVG。感谢您的帮助。

【问题讨论】：

【解决方案1】：

通过将fill: white 添加到您的路径，给它一些过渡的东西。

path {
    fill: white;
    transition: fill 2.0s !important;
    }

【讨论】：

【解决方案2】：

您不能将填充从 nothing 过渡到黑色。将原始填充添加到path

path { 
    transition: fill 2.0s !important;
    fill: transparent;
}

【讨论】：