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

Question

我有一个JSFiddle here。我已使用walkway.js为path元素绘制了图形，效果很好，但绘制完成后，我想动画填充svg的路径元素。我曾试图给出路径下面的CSS：

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

，并在回调函数（当完成.draw()执行）我通过应用类testClass像这样改变路径的fill值：

.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

添加