Sử dụng CSS để tạo hiệu ứng tô đầy các phần tử đường dẫn SVG

Question

Tôi có một số JSFiddle here. Tôi đã vẽ hình động một phần tử path bằng cách sử dụng walkway.js và nó hoạt động rất tốt, nhưng sau khi bản vẽ được hoàn thành, tôi muốn tạo hiệu ứng cho phần tử đường dẫn của svg. Tôi đã cố gắng đưa ra các con đường CSS sau đây:

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

và trên hàm callback (thực hiện khi .draw() được hoàn thành) để thay đổi giá trị của con đường của fill bằng cách áp dụng các lớp testClass như vậy:

.testClass { 
    fill:black; 
} 

Tính năng này không hoạt động - quá trình chuyển đổi sẽ không được áp dụng và khi gọi lại được gọi ngay lập tức là 'flicks' black-- không bị mờ dần. Phương pháp tương tự này đã làm việc trên các phần tử html đơn giản, không liên quan đến SVG. Tôi đánh giá cao sự giúp đỡ nào.

Answer 1

Cung cấp thứ gì đó để chuyển đổi từ, bằng cách thêm fill: white vào đường dẫn của bạn.

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

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

Answer 2

Bạn không thể chuyển điền từ gì sang màu đen. Thêm điền gốc để path

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

fiddle