1

Estou com um problema para fazer uma animação onde tenho um circle em svg e preciso fazê-lo aumentar até cobrir toda a tela, como um FAB que se transforma em uma div, já fiz uma animação dessa porém com muita gambiarra de background-size e background-position.

O modo mais simples e que tem melhor performance foi usando o transform: scale();, ficou de jeito que eu queria mas aí vem o problema, no Firefox funcionou perfeitamente, porém no Chrome (e no Opera que estou utilizando) o svg fica 'borrado' por assim se dizer enquanto está ocorrendo o scale.
Tem algum modo de corrigir isso nem que tenha que usar alguma biblioteca js ou algo do tipo, pois já tentei de tudo o que eu sei e nada adiantou. Segue o código que estou usando.

$(document).ready(function() {
  $(".btn").click(function () {
        svg = $(this);
        if(svg.attr("class") == "btn active") {
            svg.attr("class", "btn");
        }
        else {
            svg.attr("class", "btn active");
        }
  });
})
.btn {
            fill: #1dc7ff;
            width: 3.5rem;
            height: 3.5rem;
            border-radius: 50%;
            cursor: pointer;
            position: fixed;
            right: 1rem;
            bottom: 1rem;
            transition: .05s;
        }
        .btn:active {
            transform: scale(.95);
            transition: 4s;
        }
        .btn.active {
            transform: scale(100);
            transition: 10s;
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<svg class="btn">
    <circle cx="1.75rem" cy="1.75rem" r="1.75rem"></circle>
</svg>

Obs: já tentei usar o código abaixo que encontrei em vários fóruns mas não resolveu:

svg {
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1.0, 1.0);
  transform: translateZ(0);
}

Imagem de como fica durante a animação: inserir a descrição da imagem aqui

7
  • Acho que depende do browser. Em qual você está testando? Pelo menos no Chrome/OSX não vejo muito problema na animação. Ela é um pouco rápida, talvez isso seja a causa do borrão?
    – bfavaretto
    Commented 16/10/2017 às 22:25
  • Pronto editei a velocidade Commented 16/10/2017 às 22:30
  • Sei que fica assim somente no Chrome e Opera, mas como são navegadores muito utilizados (jugo o Chrome) preciso resolver isso. Commented 16/10/2017 às 22:45
  • kk o problema não é a velocidade da animação e sim o modo como o svg fica borrado durante a animação scale como deixei o exemplo na imagem. Commented 16/10/2017 às 23:19
  • 1
    Acho que o que vc tinha que fazer era o contrário: criar um svg gigante e colocar ele inicialmente menor. Assim não iria estourar. O que vc tha fazendo é criando um pequeno e aumentando... o navegador estoura ele quando aumenta.
    – Sam
    Commented 17/10/2017 às 0:23

1 Resposta 1

2

Alguns navegadores "estouram" a qualidade do svg quando aumentado seu tamanho original (ex, Chrome).

Uma solução é criar um svg com tamanho original igual à maior escala que você queria e reduzi-lo inicialmente com o scale. Assim ao ser clicado, ele iria crescer até o tamanho original, sem perda de qualidade.

  $(document).ready(function() {
  $(".btn").click(function () {
        svg = $(this);
        if(svg.attr("class") == "btn active") {
            svg.attr("class", "btn");
        }
        else {
            svg.attr("class", "btn active");
        }
  });
})
.btn {
            fill: #1dc7ff;
            width: 80rem;
            height: 80rem;
            border-radius: 50%;
            cursor: pointer;
            position: fixed;
            right: -30rem;
            bottom: -37rem;
            transition: .05s;
            transform: scale(.01);
        }
        .btn:active {
            transform: scale(.95);
            transition: 4s;
        }
        .btn.active {
            transform: scale(100);
            transition: 100s;
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg class="btn">
    <circle cx="40rem" cy="40rem" r="40rem"></circle>
</svg>

1
  • Caso alguém esteja com dificuldades em fazer a animação deixo um exemplo com algumas modificações pequenas para funcionar como eu queria, mas sem a resposta do @DvD não teria dado certo. Usei duas bibliotecas o Jquery e TweenMax GSAP, poré ela resolvia parcialmente meu problema e com a solução da resposta acima consegui fazer. segue link jsfiddle.net/wvo67yc2 Commented 17/10/2017 às 11:56

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 .