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

Axure RP 9
1

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.

2

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!

4

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)

5

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: