Image's Color Filter vs style effects interactions (SVG)

It seems like the new color filter options are not working with the style effect interactions.

What I am trying to do is to change a SVG image’s color when :selected or :mouseover, by using the RP9 new color filter feature.

  1. I have a blue colored SVG icon in my library, that I drag into my canvas.
  2. I changed its color by removing the saturation, so it turned gray.
  3. I created 2 interactions:
  • :mouseover - which I changed the color filter back to orginal blue (it renders just fine in UI)
  • :selected - which I removed the saturation again and boosted the brightness to get a white (renders well too).

But when I launch in browser, no interaction styling is working. There are no change to the icon.

PS. I’ve tried many different ways with/without grouping; by no changing the original color; etc Nothing worked.

Hi JCMartel,

I haven’t been able to reproduce this from a quick test, so I was wondering if you would be able to post your .rp file here so that I could take a closer look? Please also let me know the browser you’re using to preview the page, as well as the specific SVG that is causing the issue. Thanks!

Hi Jane,

Thank you for your reply. I’ve attached an example I’ve just made for you. I hope it will help you guys figure it out.

SVG image filter issue example…rp (54.8 KB)

Hi JCMartel,

Ah! Got it. Thanks fort the sample .rp file - that was very helpful. It looks like Image Filter feature (e.g. saturation) does not work for Style Effects interactions, and I’ve filed this as a bug with our QA team so we can get this fixed up. :slight_smile: