Animation transform scale "blurring" svg while animating

Question

Animation transform scale "blurring" svg while animating

Navigation

#1 by (2 votes)

1

I have a problem to do an animation where I have circle in svg and I need to make it increase until I cover the whole screen, like a FAB that turns into a div, I've done an animation of that but with a lot of background-size and background-position .

The simplest and best-performing mode was using transform: scale(); , it was the way I wanted it, but here comes the problem, in Firefox it worked perfectly, but in Chrome (and in Opera I'm using) svg stays 'blurred' so to speak while scale is occurring.
There's some way to fix this even if I have to use some js library or something, because I've tried everything I know and it did not work. Here is the code I'm using.

$(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><svgclass="btn">
    <circle cx="1.75rem" cy="1.75rem" r="1.75rem"></circle>
</svg>

Note: I tried to use the code below that I found in several forums but did not solve:

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

How it works during the animation:

css svg webkit transform

asked by anonymous 17.10.2017 / 00:10

1 answer

Hover is not displaying correctly Multiple components in Vue.use

score 2 · Accepted Answer

Some browsers "burst" the quality of svg when it increases its original size (ex, Chrome).

One solution is to create a svg with original size equal to the largest scale you wanted and reduce it initially with scale . So when it was clicked, it would grow to its original size without loss of quality.

  $(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><svgclass="btn">
    <circle cx="40rem" cy="40rem" r="40rem"></circle>
</svg>