Hover on SVG on my page does not answer

Question

I am trying to create a circle with several divisions in SVG, and each section when passing the mouse, I would like the background color to change. However the code I’m trying to use isn’t working. I added the class "T3-30" in the square that I want to change the background color when passing the mouse over, but on the page only xlink works, the mouse Hover does not...

SVG code:

 <a xlink:href="#">
    <path class ='t3-30'
    style="fill:#f2f2f2;stroke:none;stroke-width:7.38895512;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
    d="m 242.86651,56.159949 c -5.21279,-12.38751 -9.12939,-22.869949 -8.70354,-23.29431 3.2411,-3.22978 63.66868,-22.054228 65.23154,-20.320981 0.5617,0.622944 10.81001,47.586663 10.81001,49.537777 0,0.528169 -1.97943,0.973262 -4.39874,0.989096 -2.4193,0.01584 -14.8183,3.534825 -27.55333,7.819977 -12.73502,4.285154 -23.77414,7.791188 -24.53136,7.791188 -0.75722,0 -5.64178,-10.135236 -10.85458,-22.522747 z"
    id="path50499"
    inkscape:connector-curvature="0"
    transform="matrix(0.26458333,0,0,0.26458333,4.9999997,48.5)" /> </a>

CSS code:

.t3-30:hover {
fill: #ffff00;

}

I didn’t post the entire SVG code here because it’s too long. I created the same in Inkscape, and the header looks like this:

<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="100mm"
height="100mm"

viewBox="0 0 200 200"
version="1.1"
id="svg8"
sodipodi:docname="daily_calendar.svg"
inkscape:version="0.92.3 (2405546, 2018-03-11)">
<defs
    id="defs2" />
<sodipodi:namedview
    id="base"
    pagecolor="#ffffff"
    bordercolor="#666666"
    borderopacity="1.0"
    inkscape:pageopacity="0.0"
    inkscape:pageshadow="2"
    inkscape:zoom="0.51151044"
    inkscape:cx="585.46772"
    inkscape:cy="285.44195"
    inkscape:document-units="mm"
    inkscape:current-layer="layer1"
    showgrid="false"
    inkscape:snap-center="true"
    inkscape:snap-object-midpoints="true"
    inkscape:snap-midpoints="true"
    inkscape:snap-smooth-nodes="true"
    inkscape:snap-intersection-paths="true"
    inkscape:object-nodes="true"
    inkscape:snap-nodes="true"
    inkscape:snap-others="true"
    inkscape:snap-grids="true"
    inkscape:snap-to-guides="true"
    inkscape:object-paths="true"
    inkscape:snap-bbox="true"
    inkscape:bbox-nodes="true"
    inkscape:bbox-paths="true"
    inkscape:snap-bbox-midpoints="true"
    inkscape:snap-bbox-edge-midpoints="true"
    inkscape:snap-page="true"
    showguides="false"
    inkscape:window-width="1366"
    inkscape:window-height="715"
    inkscape:window-x="-8"
    inkscape:window-y="-8"
    inkscape:window-maximized="1" />

<g
    inkscape:label="Camada 1"
    inkscape:groupmode="layer"
    id="layer1"
    transform="translate(-4.9999997,-48.5)">
    <circle
    style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
    id="path3723"
    cx="105"
    cy="148.5"

. . .

Could someone help me?

Answer 1

Guy like you didn’t put your entire SVG code I had to make one to use as an example here.

The first thing you can do is put a fill:transparent in the vector, as without the fill (fill:none) he won’t recognize the :hover, because it’s like he doesn’t have an "active area" so put a fill even though transparent to avoid qq bug :hover

Then just do the css of the :hover direct in . css or if you prefer inside <defs><style> in SVG itself, in case I did in external css just to facilitate.

Look at the example: (Hover the mouse in cell 2C)

rect {stroke:black;stroke-width:1;fill:transparent;}
text {user-select: none; pointer-events: none;}
.teste:hover {fill:red;stroke:green;stroke-width:3;}
    

<svg width="403" height="302" viewBox="0 0 403 302" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect width="100" height="100"/>
        <rect x="101" width="100" height="100"/>
        <rect x="202" width="100" height="100"/>
        <rect x="303" width="100" height="100"/>
        <rect y="101" width="100" height="100"/>
        <rect x="101" y="101" width="100" height="100"/>
        <rect class="teste" x="202" y="101" width="100" height="100"/>
        <rect x="303" y="101" width="100" height="100"/>
        <rect y="202" width="100" height="100"/>
        <rect x="101" y="202" width="100" height="100"/>
        <rect x="202" y="202" width="100" height="100"/>
        <rect x="303" y="202" width="100" height="100"/>
        <text x="202" y="121" fill="blue">2C</text>
</svg>

---

Pure SVG with the Style in the <defs>

Click on Expand down below:

<svg width="403" height="302" viewBox="0 0 403 302" fill="none" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <style>
            rect {stroke:black;stroke-width:1;fill:transparent;}
            text {user-select: none; pointer-events: none;}
            .teste:hover {fill:red;stroke:green;stroke-width:3;}
        </style>
    </defs>
    <rect width="100" height="100"/>
    <rect x="101" width="100" height="100"/>
    <rect x="202" width="100" height="100"/>
    <rect x="303" width="100" height="100"/>
    <rect y="101" width="100" height="100"/>
    <rect x="101" y="101" width="100" height="100"/>
    <rect class="teste" x="202" y="101" width="100" height="100"/>
    <rect x="303" y="101" width="100" height="100"/>
    <rect y="202" width="100" height="100"/>
    <rect x="101" y="202" width="100" height="100"/>
    <rect x="202" y="202" width="100" height="100"/>
    <rect x="303" y="202" width="100" height="100"/>
<text x="202" y="121" fill="blue">2C</text>
</svg>