"Fill" as an option for SVG/Shape Interaction

svg-pentool-customshapes

#1

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.


#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”.


#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?


#4

Select the widget and go to New Interaction > :mouseover. Select the Fill Color checkbox and choose the new color.


#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.


#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:


#7

Thanks! This helped me.