2

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...

Circulo

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?

1
  • Não ta funcionando esse svg! poste ele completo no pastebin Commented 12/11/2018 às 12:21

1 Resposta 1

2

Cara como vc não colocou o seu código inteiro do SVG eu tive que fazer um para poder usar de exemplo aqui.

A primeira coisa que vc pode fazer é colocar um fill:transparent no vetor, pois sem o fill (fill:none) ele não vai reconhecer o :hover, pois é como se ele não tivesse uma "área ativa" então coloque um fill mesmo que transparente para evitar qq bug de :hover

Depois basta fazer o css do :hover direto no .css ou se preferir dentro do <defs><style> no próprio SVG, no caso eu fiz no css externo só pra facilitar.

Veja como ficou o exemplo: (Passe o mouse na célula 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>


SVG puro com o Style no <defs>

Clique em Expandir abaixo:

<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>

9
  • Obrigado hugocsl! Pelo que pude entender, o problema é que o fill:none é que causa o problema? Porém no path que quero implementar o hover está com fill: fill:#f2f2f2. Commented 13/11/2018 às 15:33
  • @FernandoFerrariFernandes não necessariamente é o fill, o fill poderia ser um dos problemas... mas se o shape já tem uma cor o seu problema pode ser com o CSS e o :hover, tente fazer um teste com um SVG mais simples e tentar mudar a cor no :hover pra ver como fica. Se o seu SVG for em <path> verifique se o Path esta fechado e se o preenchimento está mesmo no fundo ou só no contorno desse Path, vc pode testar isso rapidamente colocando uma cor de background no Body e ver se o seu SVG realmente está com cor ou se vc está vendo a cor do fundo por entre as linhas do svg...
    – hugocsl
    Commented 13/11/2018 às 15:55
  • Legal. Deu certo era exatamente a questão do preenchimento como você mencionou e resolveu meu problema. Muito obrigado! Commented 18/11/2018 às 15:44
  • @FernandoFerrariFernandes que bom que resolver, se vc acha que o problema foi resolvido considere marcar a Resposta como Aceita assim ela não fica pendente no site como pegunta não respondia.
    – hugocsl
    Commented 18/11/2018 às 15:51
  • Eu postei outra... nao resolveu nao... o erro continua quando o svg é mais elaborado. postei outra pergunta com o codigo completo Commented 18/11/2018 às 18:05

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .