Changing color when hover or pressing a SVG icon

Like (0) Share

Report

Posted on 6 Feb 2024 19:20:55 by CU16021406-1

1,027

Dear community,

I have made a SVG icon and put that in an image on my canvas. It looks great.

I have put a transparent PowerApps icon (and not a button) on top of it for the hovering and pressing properties
(and offcourse the pointing cursor).

I have declared a color in the OnStart:

Set (

defaults;

{primaryColor: ColorValue("#6200EE")}

);;

Set (

defaults;

Patch(

defaults;

{

primaryColorHex: Match(

JSON(defaults.primaryColor;JSONFormat.IgnoreUnsupportedTypes);

"#[a-fA-F0-9]{6}"

).FullMatch

}

)

and offcourse declared that variable in the SVG code:

"data&colon;image/svg+xml;utf8, "&

EncodeUrl("

What i woud like is when i hover over the icon the color then must be changed of the SVG image and offcourse the same for pressing on the icon. Is that possible?

I quess i have to change the color in the OnStart in the propery HoverFull of the icon. Is that possible?

GR. P

All responses (5)

Answers (1)

Verified answer

TheRobRush 11,121 Super User 2025 Season 1 on 06 Feb 2024 at 21:15:44

Like (0)

Report

Re: Changing color when hover or pressing a SVG icon

to change the color of your svg if it being pressed, jsut place a button above it and make it transparent and set your svg color based on the .Pressed property of the invisible button
TheRobRush 11,121 Super User 2025 Season 1 on 06 Feb 2024 at 21:14:39

Like (0)

Report

Re: Changing color when hover or pressing a SVG icon

You can not alter the color of anything when something else is hovered above, and ONLY to self items on things that have a hovercolor/hoverfill/hoverbordercolor property. We can not unfortunately access the onhover info directly, or reference it.
CU16021406-1 1,027 on 06 Feb 2024 at 21:13:04

Like (0)

Report

Re: Changing color when hover or pressing a SVG icon

Oke let's make it a little easier. I have an PowerApps icon with a Printer and an envelop as SVG file.
What i would like is when hovering over the printer the color of the SVG file changes. Also with the pressing of the icon. How can i do that?
mmbr1606 12,471 Super User 2025 Season 1 on 06 Feb 2024 at 21:09:03

Like (0)

Report

Re: Changing color when hover or pressing a SVG icon

Hey @PeKi72

Try something like this

On visible of first screen:

Set(defaults, {primaryColor: ColorValue("#6200EE"), hoverColor: ColorValue("#3700B3"), pressColor: ColorValue("#03DAC6")});

Onselect of icon
Set(currentColor, defaults.pressColor);

Let me know if my answer helped solving your issue.

If it did please accept as solution and give it a thumbs up so we can help others in the community.

Greetings
TheRobRush 11,121 Super User 2025 Season 1 on 06 Feb 2024 at 21:06:34

Like (0)

Report

Re: Changing color when hover or pressing a SVG icon

You could do it WHILE it is being pressed, or even permanently AFTER it has been pressed. But not while hovering, OnHover is not aproperty that exists for our use unfortunately.