cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
jdhough55
Helper II
Helper II

SVG hover in PowerApps

Hi there, 

Has anyone got the hover colour working within an SVG on PowerApps ? 

 

I create an SVG and then I add this to the code : 

 

<style>
.icon{ fill: black}
.icon:hover{ fill: blue}
.icon:active{ fill: green}
</style>
 
It makes no difference what so ever... any ideas ? There is no point having an SVG (to make a button) if there is no hover available. 
 
 
6 REPLIES 6
jdhough55
Helper II
Helper II

here is a sample of a SVG : 

 

"data&colon;image/svg+xml," &
EncodeUrl(
"<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='-10 0 2068 2048'>
<g transform='matrix(1 0 0 -1 0 2048),rotate(0,1034,1024)'>
<path fill='rgba(178,34,34,0.2)'
d='M1570 1611q42 0 78.5 -15.5t63.5 -42.5t42.5 -63.5t15.5 -78.5q0 -40 -15 -77t-43 -65l-794 -795q-28 -28 -65 -43.5t-77 -15.5t-77 15.5t-65 43.5l-362 362q-28 28 -43.5 65t-15.5 77q0 42 16 78.5t43 63.5t63.5 42.5t78.5 15.5q40 0 77 -15t65 -43l220 -220l652 653q28 28 65 43t77 15z' />
</g>
RandyHayes
Super User
Super User

@jdhough55 

Problem is that you are using a class to style.  PowerApps SVGs do not support styles or classes.  Only inline styles are allowed, and that would not give you the hover (that I am aware of).   

 

I hope this is helpful for you.

_____________________________________________________________________________________
Digging it? - Click on the Thumbs Up below. Solved your problem? - Click on Accept as Solution below. Others seeking the same answers will be happy you did.
NOTE: My normal response times will be Mon to Fri from 1 PM to 10 PM UTC (and lots of other times too!)
Check out my PowerApps Videos too! And, follow me on Twitter @RandyHayes

Really want to show your appreciation? Buy Me A Cup Of Coffee!
jdhough55
Helper II
Helper II

So there is not a way to create a button as a customised icon ? I was looking at using the fabric icons but really you need the hover option on a button for it to look complete. 

RandyHayes
Super User
Super User

@jdhough55 

Unfortunately no (at least that I have ever been able to achieve - and I've given it a good effort).  The styles ability is not available and you need to be able to specify the hover style.  None of the controls in PowerApps "expose" their events (like hover), so you really can't catch it and respond to it.

Definitely is in the Idea forum many times and many ways.  Seems the top checked idea is this one.  Unfortunately from 2018 and still marked as "new"  😞

 

 

_____________________________________________________________________________________
Digging it? - Click on the Thumbs Up below. Solved your problem? - Click on Accept as Solution below. Others seeking the same answers will be happy you did.
NOTE: My normal response times will be Mon to Fri from 1 PM to 10 PM UTC (and lots of other times too!)
Check out my PowerApps Videos too! And, follow me on Twitter @RandyHayes

Really want to show your appreciation? Buy Me A Cup Of Coffee!
jdhough55
Helper II
Helper II

so really the only option is to write a component in code it in react to achieve this.... oh man - thanks !!!

@jdhough55 @RandyHayes 

 

Actually we find this specific line of discussion quite interesting.

 

Other than the idea link, do either of you happen to be specifically familiar with any attempt by someone to provide a component for this already, whether it's a custom Power Apps code component or otherwise?

 

If so, please provide any info you know as we would be interested to know about it just in case. We will also attempt to check on it ourselves as well, but could not find anything of the sort yet.

 

 

 

Helpful resources

Announcements
Power Platform Call June 2022 768x460.png

Power Platform Community Call

Join us for the next call on August 17, 2022 at 8am PDT.

Power Platform Conf 2022 768x460.jpg

Join us for Microsoft Power Platform Conference

The first Microsoft-sponsored Power Platform Conference is coming in September. 100+ speakers, 150+ sessions, and what's new and next for Power Platform.

365 EduCon 768x460.png

Microsoft 365 EduCon

Join us for two optional days of workshops and a 3-day conference, you can choose from over 130 sessions in multiple tracks and 25 workshops.

Users online (1,528)