2

gostaria de pedir ajuda novamente, estou com dificuldade em fazer funcionar o hover (CSS) sobre o meu SVG. Trata-se de um calendário circular com 31 dias, divididos em três turnos (cada camada é um turno). Ao passar o mouse sobre cada célula, eu gostaria que o fundo trocasse de cor com efeito (transition 2s). Porém o CSS não está funcionando.

Cada célula tem o ID igual dxxsyy, onde d = dia, e s = turno. Então por exemplo, para trocar a cor dá célula do dia 15 no segundo turno, seria o id=d15s2 no SVG.

O código completo do SVG segue abaixo inserir a descrição da imagem aqui

O SVG tem o tamanho muito grande SVG do calendario acima

  
<script src="https://pastebin.com/embed_js/yRJm0E6v"></script>

#d1s1 {
    transition: fill 2s;
}

#d1s1:hover {
    fill: #ffff00;
}

Enfim, o que eu quero fazer é ao passar o mouse sobre qualquer célula deste calendário circular, o fundo fique de outra cor (amarelo), e ao clicar, ele permanecer em uma dessas cores: verde, vermelho ou cinza.

1
  • Sobre o transition não estar funcionando eu respondi abaixo, sobre trocar a cor no clique essa resposta pode te ajudar, mas com jQuery ou JS vc consegue no evento do clique colocar ou tirar a cor pt.stackoverflow.com/questions/286686/…
    – hugocsl
    Commented 18/11/2018 às 19:25

2 Respostas 2

3

Dei uma olhada no código do seu SVG e um dos motivos dele estar GIGANTE é que vc está usando CSS inline, direto em cada um dos vetores tipo style="propriedades" o correto seria vc criar uma classe e usar nos vetores.

Inclusive esse é o problema com o seu CSS, vc tem que sobrescrever o fill que está inline na tag, e para isso vc tem que usar um !important. Então crie um CSS para todos os paths e coloque !important no fill do :hover.

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

OBS 1: Dessa forma vai funcionar. Apesar disso a forma como o SVG foi gerado está meio comprometida... Quando vc fizer o :hover ai vc vai ver que a cor não preenche completamente a célula e isso só tem como corrigir gerando outro SVG...

OBS 2: Repare que no estilo eu coloquei o CSS para TODOS os paths do SVG por isso fica um pouco bugado, mas vc deve fazer isso apenas para os paths das células, para isso crie uma classe específica e remova o style="" direto das tag entende

Como o arquivo é grande fiz um vídeo para vc ver o resultado...

inserir a descrição da imagem aqui

1
2

Você não consegue alterar o fill via :hover no <style> porque ele já está definido via style inline:

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

Para o :hover funcionar no <style> você deve definir o fill no <style>, e pode aproveitar também para definir o stroke-width, e remova o style do elemento:

Elemento sem 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 para o #d1s1:

<style>
#d1s1 {
   fill:#ffffff;
   stroke-width:1.95499432;
   transition: fill 2s;
}

#d1s1:hover {
   fill: #ffff00;
}
</style>

O ideal é aplicar aos path (já que todos são path) e não a cada id, logo seria:

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

path:hover {
   fill: #ffff00;
}

Para alterar a cor no clique, crie classes com as cores e adicione via JavaScript. Por exemplo, crie uma classe para a cor verde:

.verde{
   fill: #090;
}

Adicione um dataset cor com o nome da classe no path de acordo com a cor que você deseja para ele ao ser clicado:

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

E crie no JavaScript crie um evento click para cada path que irá aplicar a classe de acordo com a cor do dataset cor do elemento clicado:

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

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 .