Question

当我扩展SVG时，它只在Chrome中模糊，在Firefox中是完美的，在IE中几乎完美。我试图用SMIL达到同样的效果，但它仍然模糊不清。

Codepen是here

我一直在寻找修复，但我找不到。

由于

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

以下是现在的看法：

＆＃13;

UnauthorizedAccessException

＆＃13;

.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);
    }
}

＆＃13;

Answer 2

尝试将明确的宽度和高度像素值设置为 @Erik Dahlstöm suggested。我已经有了一个宽度，但我只需要设置一个明确的高度。

对比

仅在Chrome中扩展SVG是模糊的

2 个答案: