Eu estou tentando criar um círculo com diversas divisões em SVG, e cada seção ao passar o mouse, eu gostaria que a cor de fundo mudasse. No entanto o código que eu estou tentando usar não está funcionando. Adicionei a classe "t3-30" no quadrado que quero mudar a cor de fundo quando passar o mouse sobre, porém na página somente o xlink funciona, o mouse hover não...
Código SVG:
<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>
Código do CSS:
.t3-30:hover {
fill: #ffff00;
}
Não postei o código inteiro do SVG aqui porque é longo demais. Criei o mesmo no Inkscape, e o cabeçalho é assim:
<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"
. . .
Alguém poderia me ajudar?