Animating Colour changes via the fill attribute in ACE.SVG

More of a comment than a question as I have already figured it out, but hope this might help others.

When you try and animate a colour change in an object from an Inkscape drawing using ACE.SVG it doesn’t work.

This is due to the way Inkscape is coding the fill attribute. If the fill is part of the “style” attribute then the SVG.js cannot override its value. For example, the following shows two circle elements:

<circle
       style="fill:#e4e4e4;stroke:#4742ed;stroke-width:0.499999;stroke-linecap:round"
       id="circle01"
       cx="26.537086"
       cy="24.895678"
       r="10.434727" />
    <circle
       fill="#000000"
       stroke="#aaaaaa"
       stroke-width="1.0"
       stroke-linecap="round"
       id="circle02"
       cx="51.186798"
       cy="24.895678"
       r="10.434727" />

The default attributes are shown in circle01, and this will not work with an animate statement. The circle02 one has been changed to use actual svg attributes directly, and this will show an animation on the fill attribute.

Example fill animation (circle2 is mapped to circle02 in svgmap):

svgmap.circle2.animateOn(1500, (lastValue != 8), (elem) => {
    // Animate the colour from black to green and back
    elem.ease('<>').attr({ fill: '#0f0' }).loop(0, true);
});
1 Like

Thanks for adding this topic, @euandk

For context for the community, here is the plugin in question: