Mouse Hover does not work in the cells of the circular calendar in SVG

Question

Mouse Hover does not work in the cells of the circular calendar in SVG

Navigation

#1 by (3 votes)
#2 by (2 votes)

2

I would like to ask for help again, I'm having trouble making hover (CSS) work on my SVG. This is a circular calendar with 31 days, divided into three shifts (each layer is one shift). By hovering over each cell, I would like the background to change color with effect (transition 2s). But CSS is not working.

Each cell has the ID d xx s yy, where d = day, and s = shift. So for example, to change the color gives cell of day 15 in the second round, would be id = d15s2 in SVG.

The full SVG code is below

SVGisverylargeinsize SVG of the calendar above

<script src="https://pastebin.com/embed_js/yRJm0E6v"></script>

#d1s1 {
    transition: fill 2s;
}

#d1s1:hover {
    fill: #ffff00;
}

Anyway, what I want to do is to hover over any cell in this circular calendar, the background is of another color (yellow), and when it clicks, it remains in one of these colors: green, red or gray. / p>

css svg hover

asked by anonymous 18.11.2018 / 18:44

2 answers

CodeIgniter form_open_multipart, how to use What is the size of the memory according to the size of the address?

score 3 · Answer 1

I took a look at the code of your SVG and one of the reasons why it is GIANT is that you are using CSS inline , right in each of the vectors type style="propriedades" the correct would be to create a class and use the vectors.

Including this is the problem with your CSS, you have to overwrite the fill that is inline in the tag, and for this you have to use a !important . Then create a CSS for all paths and put !important on fill on :hover .

<defs>
    <style>
        path {
            transition: fill 2s;
        }
        path:hover {
            fill:red !important;
        }
    </style>
</defs>

OBS 1: That way it will work. However the way the SVG was generated is a bit compromised ... When you do :hover you will see that the color does not completely fill the cell and this only has to correct generating another SVG ...

create a specific class and remove the paths direct from the tags understand

As the file is large I made a video for you to see the result ...

score 2 · Answer 2

You can not change the fill via :hover in <style> because it is already set via style inline :

<path style="fill:#ffffff;stroke-width:1.95499432"...

For :hover to work in <style> you should set fill to <style> , and you can also use stroke-width , and remove style from element:

Element without style:

<path d="m 409.51823,171.04465 c -1.61287,-0.34827 -8.87078,-1.19599 -16.1287,-1.88382 l -13.19621,-1.2506 v -25.25932 -25.25932 l 10.26372,0.0148 c 9.75768,0.014 34.79672,3.33913 36.27473,4.81715 0.64735,0.64736 -6.48667,38.8851 -8.67303,46.48669 -0.95153,3.30828 -2.31046,3.67973 -8.54051,2.33446 z"
   id="d1s1"
   inkscape:connector-curvature="0"
   transform="matrix(0.26458333,0,0,0.26458333,4.9999997,48.5)"
   inkscape:label="d1s1" />

CSS for # d1s1:

<style>
#d1s1 {
   fill:#ffffff;
   stroke-width:1.95499432;
   transition: fill 2s;
}

#d1s1:hover {
   fill: #ffff00;
}
</style>

The ideal is to apply to path (since all are path ) and not every id , so it would be:

path {
   fill:#ffffff;
   stroke-width:1.95499432;
   transition: fill 2s;
}

path:hover {
   fill: #ffff00;
}

To change the color on the click, create classes with colors and add via JavaScript. For example, create a class for the green color:

.verde{
   fill: #090;
}

Add a dataset cor with the name of the class in path according to the color you want for it when clicked:

<path data-cor="verde" d="m 409.51823,171.04465 c -1.61287,-0.34827 -8.87078,-1.19599 -16.1287,-1.88382 l -13.19621,-1.2506 v -25.25932 -25.25932 l 10.26372,0.0148 c 9.75768,0.014 34.79672,3.33913 36.27473,4.81715 0.64735,0.64736 -6.48667,38.8851 -8.67303,46.48669 -0.95153,3.30828 -2.31046,3.67973 -8.54051,2.33446 z"
   id="d1s1"
   inkscape:connector-curvature="0"
   transform="matrix(0.26458333,0,0,0.26458333,4.9999997,48.5)"
   inkscape:label="d1s1" />

And create in JavaScript create a click event for each path that will apply the class according to the color of the dataset cor of the clicked element:

<script>
var paths = document.querySelectorAll("path");
for(var x=0; x<paths.length; x++){
   paths[x].addEventListener("click", function(){
      this.classList.add(this.dataset.cor);
   });
}
</script>