使用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

添加