仅在 Chrome 中放大 SVG 才模糊

Question

当我放大 SVG 时，它仅在 Chrome 中是模糊的，在 Firefox 中是完美的，在 IE 中几乎是完美的。我尝试用 SMIL 达到相同的效果，但它仍然很模糊。

代码笔在这里

我一直在寻找解决办法，但一直找不到。

谢谢

CSS：

.svg-container{
  -webkit-backface-visibility: hidden;
  -webkit-animation: scaling 4s linear  infinite alternate forwards;
  animation: scaling 4s linear infinite alternate forwards;
   transform: scale(16, 16) translateZ(0);
    -webkit-transform: scale(16, 16) translateZ(0);

}
@-webkit-keyframes scaling {
    from {
        -webkit-transform: scale(16, 16) translateZ(0);
        -ms-transform: scale(16, 16) translateZ(0);
            transform: scale(16, 16) translateZ(0);
    }
    to {
        -webkit-transform: scale(0.75,0.75) translateZ(0);
        -ms-transform: scale(0.75,0.75) translateZ(0);
            transform: scale(0.75,0.75) translateZ(0);
    }
}

@keyframes scaling {
    from {
        -webkit-transform: scale(16, 16) translateZ(0);
        -ms-transform: scale(16, 16) translateZ(0);
            transform: scale(16, 16) translateZ(0);
    }
    to {
        -webkit-transform: scale(0.75,0.75) translateZ(0);
        -ms-transform: scale(0.75,0.75) translateZ(0);
            transform: scale(0.75,0.75) translateZ(0);
    }
}

HTML：

<div class="svg-container">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="644px" height="474px" viewBox="0 0 644 474" style="enable-background:new 0 0 644 474;" xml:space="preserve">
        <style type="text/css">
        .st0 {fill: #22B573;stroke: #000000;stroke-width: 23;stroke-miterlimit: 10;}            
        .st1 {fill: #39B54A;stroke: #000000;stroke-width: 6;stroke-miterlimit: 10;}            
        .st2 {fill: #00723D;stroke: #000000;stroke-width: 6;stroke-miterlimit: 10;}
        </style>
        <circle class="st2" cx="381.307" cy="280.325" r="135.276" />
        <circle class="st1" cx="381.307" cy="280.325" r="112.99" />
        <circle class="st0" cx="381.307" cy="280.325" r="67.177" />
    </svg>
</div>

Answer 1

现在看起来是这样的：

.svg-container{
  -webkit-backface-visibility: hidden;
  -webkit-animation: scaling 4s linear  infinite alternate forwards;
  animation: scaling 4s linear infinite alternate forwards;
   transform: scale(16, 16) translateZ(0);
    -webkit-transform: scale(16, 16) translateZ(0);

}
@-webkit-keyframes scaling {
    from {
        -webkit-transform: scale(16, 16) translateZ(0);
        -ms-transform: scale(16, 16) translateZ(0);
            transform: scale(16, 16) translateZ(0);
    }
    to {
        -webkit-transform: scale(0.75,0.75) translateZ(0);
        -ms-transform: scale(0.75,0.75) translateZ(0);
            transform: scale(0.75,0.75) translateZ(0);
    }
}

@keyframes scaling {
    from {
        -webkit-transform: scale(16, 16) translateZ(0);
        -ms-transform: scale(16, 16) translateZ(0);
            transform: scale(16, 16) translateZ(0);
    }
    to {
        -webkit-transform: scale(0.75,0.75) translateZ(0);
        -ms-transform: scale(0.75,0.75) translateZ(0);
            transform: scale(0.75,0.75) translateZ(0);
    }
}

<div class="svg-container">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="644px" height="474px" viewBox="0 0 644 474" style="enable-background:new 0 0 644 474;" xml:space="preserve">
        <style type="text/css">
        .st0 {fill: #22B573;stroke: #000000;stroke-width: 23;stroke-miterlimit: 10;}            
        .st1 {fill: #39B54A;stroke: #000000;stroke-width: 6;stroke-miterlimit: 10;}            
        .st2 {fill: #00723D;stroke: #000000;stroke-width: 6;stroke-miterlimit: 10;}
        </style>
        <circle class="st2" cx="381.307" cy="280.325" r="135.276" />
        <circle class="st1" cx="381.307" cy="280.325" r="112.99" />
        <circle class="st0" cx="381.307" cy="280.325" r="67.177" />
    </svg>
</div>