使用CSS为SVG路径元素的填充设置动画

Question

我这里有一个JSFiddle.我已经path使用了一个元素的绘制动画,walkway.js并且效果很好,但是在绘制完成之后,我想为动画填充svg路径元素.我试过给路径下面的CSS:

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

并且在回调函数上(在.draw()完成时执行)我fill通过应用类来改变路径的值,testClass如下所示:

.testClass {
    fill:black;
}

这不起作用 - 转换没有被应用,当回调被调用时,它立即"轻弹"黑色 - 根本没有淡入.这种方法适用于普通的html元素,不涉及SVG.我感谢任何帮助.

Answer 1

通过添加fill: white到您的路径,为其提供转换.

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