Maybe I am missing it somewhere, but why can we not fill a SVG or shape/line art through the interactions panel? This would be great for things like on-hover events so that you’re not constantly having to duplicate artwork.
"Fill" as an option for SVG/Shape Interaction
Rachel
#2
You can do this by converting the SVG into our vector format so that Axure RP can edit it. To do so, right-click the SVG in the editor and click “Convert SVG to Shapes”.
ChiJoshuaChr
#3
I have done that, but I still do not see anything in the interactions panel that allows me to change the color of the shape. So for instance - on-hover, change shape color to XYZ. Is that buried somewhere?
Rachel
#4
Select the widget and go to New Interaction > :mouseover. Select the Fill Color checkbox and choose the new color.
ChiJoshuaChr
#5
Ahhh, I did not see that way down there. Personal side note - kind of confusing compared to OnMouseHover event. Also, if you apply that to a grouping (say and icon and a label), it also fills the label whereas I only want the icon filled and the text color change.
Rachel
#6
Understood and appreciate the feedback! For a grouping, what you can do is add the mouseover style on each of the component widgets in the group, and then select the group and click “trigger mouse interaction styles” in the menu shown here:
yaba
#8
It’s really overdue that axure can colorize SVGs without converting. Very often you have components like icon buttons, where the icon will be exchanged later. However then you loose all the styles like the color, hover color, selected color,… Once converted users cannot change the icon easily anymore.
Figma can do this without any hassles.
As a minimum Axure should not drop the style classes when converting an SVG, but should keep these on the icon - also for Mouse Over, Mouse Down, Selected, and other styles