Animating SVG Colors in Wix Studio

Hello Wix Community,

I’ve been encountering a specific challenge while working with Wix Studio’s “Animations & Effects” feature and I’m hoping to find some guidance or a workaround. In the Wix Studio interface, it’s possible to define a variety of animations and effects for different elements on a page without needing to write any code. This includes changing the colors of containers, text, and more. However, I’ve hit a roadblock when it comes to SVG vectors.

The core of the issue is that while I can easily adjust colors of containers and text through the user interface, I am unable to set an animation that changes the color of SVG vectors despite the interface allowing changes to other element types in a similar manner. Essentially, I’m looking for a way to animate SVG color changes within the “Animations & Effects” section of Wix Studio, to bring a dynamic visual element to my site that aligns with user interactions or page transitions.

This limitation is puzzling, especially considering the flexibility Wix offers in other aspects of site design and customization. I understand that SVGs might be a bit more complex due to their XML structure, but given that color changes are possible through the editing panel for static states, it seems like there should be a pathway to animate these changes as well.

Has anyone else encountered this limitation? More importantly, are there any known workarounds or methods to animate SVG color changes within Wix Studio’s framework? Whether it involves a creative use of the existing tools or some light coding within Wix’s capabilities, I’m open to suggestions.

I appreciate any insights or guidance the community can offer.

Yes, I have had the same issue. I have also used a few different work arounds depending on the animation required but bassically design 2 seperate coloured SVG and use code to show/hide onclick or mousein.

havnt tested yet but may be possible to do with CSS