Animação favoritar | Vetores e Animação com SVG: trabalhando com CSS e JavaScript

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

por Estudante

| 389.9k xp | 241 posts

Gostaria de saber porque não funciona a animação de preenchimento do coração quando clicado, se fiz tudo exatamente como explicado neste vídeo:

https://cursos.alura.com.br/extra/alura-mais/animacao-de-coracao-um-projeto-em-html-css-c1360

<input type="checkbox" id="coracao" />
                    <label for="coracao">
                        <svg id="favoritar" viewBox="0 0 24 24" width="33" height="29" size="16" color="#999999">
                            <path fill="#19b425" fill-rule="evenodd"
                                d="M20.141 11.92A4.637 4.637 0 0016.861 4c-1.23 0-2.41.489-3.28 1.36l-.52.52a1.5 1.5 0 01-2.122 0l-.52-.52a4.639 4.639 0 00-6.56 6.56l8.14 8.14 8.142-8.14zM12 4.818l.52-.52A6.14 6.14 0 1121.2 12.98l-8.68 8.681a.737.737 0 01-1.042 0l-8.681-8.68a6.139 6.139 0 018.682-8.682l.52.52z">
                            </path>
                        </svg>
                    </label>

#coracao {
    display: none;
  }

  #coracao:checked + label > svg {
    animation: preencher;
    animation-duration: .5s;
    animation-fill-mode: forwards;
  }

  @keyframes preencher {
    0% {
      fill: transparent;
    }
    100% {
      fill: green;
    }
  }

Grata.

2 respostas

solução!

por Renato Silveira Nunes

| 88.4k xp | 110 posts

Analista programador pleno

28/02/2022

Olá Leila.

Com o código svg passado também não consegui aplicar o efeito.

Peguei outro código no site https://heroicons.com/ e consegui aplicar:

<!DOCTYPE html>
<html lang="pt-BR">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        label{ cursor: pointer;}
        #coracao { display: none;}
        #coracao:checked+label>svg {
            animation: preencher;
            animation-duration: .5s;
            animation-fill-mode: forwards;
        }
        @keyframes preencher {
            0% {
                fill: transparent;
            }
            100% {
                fill: #19b425;
            }
        }
    </style>
</head>
<body>
    <input type="checkbox" id="coracao" />
    <label for="coracao">
        <svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#19b425">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
        </svg>
    </label>
</body>
</html>

Abraço.

por Estudante

| 389.9k xp | 241 posts

28/02/2022

Olá, Renato, eu tinha tentado com outros dois svgs e também não funcionou. Agora, com este que você mostrou funcionou perfeitamente.

Muito grata!