I'm 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 is not working. I added the class "t3-30" in the square that I want to change the background color when hovering the mouse, but on the page only the xlink works, hover mouse does not ...
SVGCode:
<axlink: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 did not 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 anyone help me?