Changing color when hover or pressing a SVG icon

(0) Share

Report

Posted on by CU16021406-1

1,066

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

Categories:

Building Power Apps

I have the same question (0)

All responses (5)

Answers (1)

TheRobRush 11,128 Moderator on at

Like (0)

Report
Copy link

Link copied!

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.

Was this reply helpful? Yes No
mmbr1606 14,615 Super User 2026 Season 1 on at

Like (0)

Report
Copy link

Link copied!

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

Was this reply helpful? Yes No
CU16021406-1 1,066 on at

Like (0)

Report
Copy link

Link copied!

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?

Was this reply helpful? Yes No
TheRobRush 11,128 Moderator on at

Like (0)

Report
Copy link

Link copied!

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.

Was this reply helpful? Yes No
Verified answer

TheRobRush 11,128 Moderator on at

Like (0)

Report
Copy link

Link copied!

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

Was this reply helpful? Yes No