Changing SVG colour within a button on mouseover

1

I have a <button> element which has an SVG in it. The SVG has fill and stroke in under one class, I would like to change the colour of the fill and stroke of the SVG onmouseover and onmouseout of the button rather than the SVG.

I tried everything I know but still can not make this happen.

SVG colour change.zip (16.8 KB)

Thanks for your help!

2

Did you try adding the SVG as innerHTML and then just changing that?

It’s not optimal, but that could work.

You might be able to use CSS too.

2 Likes
3

SVG colour change.hype.zip (13.9 KB)

3 Likes
4

Awesome! Thanks Hans!

I’m playing around with your solution and trying to move the function you wrote inside the <button> tag and trigger it with mouseover and mouseout events but something is not woking. Is that possible?

Thanks!

5

you’re doing what¿

6

Have a look in the Inner HTML of the button and inside the <button> element. I want to trigger your function with onmouseover and onmouseout events from within the inner html of the button. Maybe this is not possible?

SVG colour change.zip (17.2 KB)

7

ah, you can use this approach:

8

Hi Hans

I tried adding the code but it doesn’t work. I’m not sure what I’m supposed to put in the mouseover and mouseout events within the button. I simply put the name of the function (change_colour) but that’s probably why it doesn’t work.

SVG colour change.zip (17.2 KB)

9

just curious: why do you want to do it that way. i’ve got the feeling that there can be better approaches if we’d know your aim with this …

10

Hi Hans

I’m still learning so I just wanted to see if I can try sth new. But like previous posts say this can be perfectly done from within Hype using your approach.

Thanks for your help!

11

Hi Hans

I adopted another approach using the:

document.getElementsByTagName("svg")[0].style

However, this only works if the button is only in one scene. When I add it to another scene it stops working. Why it that happen and can it be fixed?

SVG colour change.zip (28.1 KB)

Thanks for your help!

12

Without looking at the project I can tell you this is because you are asking the document for all svgs and then item 0 of its resulting array.

You should be able ask the button object to query itself for the svg or give the svgs an id each then when button click use the buttons id or any other mechanism to know which svg to ask for.

So many ways… all already exampled on the site :grinning:

1 Like
13

These are good ideas Mark. I will dig into it a little more and try to come up with a solution. :smile:

14

Hello,

My suggestion for all things SVG in Hype is Archer Editor Pro, however the JS code generated by it are server side scripts that will not run within Hype currently but can be viewed within your browser via Hype’s Preview mode.

Hope this is helpful.

1 Like
15

Hi Mark

How about this function:

function MouseOver() {

var x = document.getElementById("theme_button_1");
var y = x.getElementsByTagName("svg");
var i;
for (i = 0; i < y.length; i++) {
  y[i].style = "fill:#2FA3FF;stroke:#2FA3FF;stroke-width:10;stroke-miterlimit:10;";
} 
}

I can also use it on MouseOut and only change the fill colour and stroke. And to use it on another button I just need to change the button’s id.

SVG colour change.zip (21.9 KB)

What do you think?

Greg

16

You actually only need one function for both svgs and over and out.
i.e point both over and out to a single function.

You also do not need to use ids because you are already singling out which button by the element signature in the function.

so in this single function you can do something like this.

var thisSVG =  element.querySelector('svg') 
var over = '#2FA3FF'
var out = '#4B4C4C'

if (thisSVG.dataset.fillColour == over){
 
  thisSVG.dataset.fillColour = out
} else {
 thisSVG.dataset.fillColour =  over 
}

var colour =  thisSVG.dataset.fillColour
thisSVG.style = "fill:" + colour +";stroke:" + colour +";stroke-width:10;stroke-miterlimit:10;";

Try not to use single characters for var names. I know some people do it but it is not good practice.
You can clash with the api that may be in play and the code is hard to read and understand.

3 Likes
17

WOW! Thanks Mark. This will take my function to the next level :slight_smile: