使用CSS动画填充SVG路径元素 [英] Using CSS to animate the fill of SVG path elements

问题描述

我有一个这里的JSFiddle 。我使用 walkway.js 动画绘制一个路径元素，并且它工作得很好，但是在绘制完成后我想动画填充 svg 的路径元素。我试过给路径下面的CSS：

I have a JSFiddle here. I have animated the drawing of a path element using walkway.js and it works great, but after the drawing is completed I would like to animate the fill of the svg's path element. I have tried giving the path the following CSS:

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

和回调函数draw（）完成）我通过应用类 testClass fill 的值c>像这样：

and on the callback function (executed when the .draw() is completed) I change the value of the path's fill by applying the class testClass like so:

.testClass {
    fill:black;
}

这不工作 - 转换未应用，被称为瞬间黑色 - 根本没有消失。这个方法也适用于纯HTML元素，不涉及SVG。

This isn't working - the transition is not being applied and when the callback is called it instantly 'flicks' black-- no fade in at all. This same method has worked on plain html elements, not involved with SVGs. I appreciate any help.

推荐答案

通过添加 fill：white 到您的路径。

Give it something to transition from, by adding fill: white to your path.

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

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

这篇关于使用CSS动画填充SVG路径元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！