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

Question

我有JSFiddle here。我使用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;
    }

http://jsfiddle.net/yh2jzoxa/4/

Answer 2

您无法将无的填充转换为黑色。 将原始填充添加到path

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

fiddle