Hover mouse does not work in the circular calendar cells in SVG

Question

I would like to ask for help again, I’m having a hard time running Hover (CSS) on my SVG. It is a circular calendar with 31 days, divided into three shifts (each layer is a turn). When hovering over each cell, I would like the background to change color with effect (Transition 2s). But the CSS is not working.

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

The full SVG code follows below

The SVG is very large in size SVG from the above calendar

<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 move the mouse over any cell of this circular calendar, the background is of another color (yellow), and when clicking, it remains in one of these colors: green, red or gray.

Answer 1

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

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

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

OBS 1: This way it will work. Nevertheless the way the SVG was generated is kind of compromised... When you do the :hover ai you will see that the color does not completely fill the cell and it just has to correct generating another SVG...

OBS 2: Note that in the style I put CSS for ALL SVG paths so it gets a bit buggy, but you should do this just for the paths of cells, so create a specific class and remove the style="" straight from the tag understands

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

Answer 2

You can’t change the fill via :hover in the <style> because it is already defined via style inline:

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

To the :hover work in the <style> you must define the fill in the <style>, and can also use to define the stroke-width, and remove the style of the 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 the #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 everyone is path) and not every id, soon would be:

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

path:hover {
   fill: #ffff00;
}

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

.verde{
   fill: #090;
}

Add a dataset cor with the class name in path according to the color you want it to be clicked on:

<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 an event click for each path which 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>