【发布时间】：2015-08-16 00:23:43
【问题描述】：
当我放大 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>
【问题讨论】：
-
不特定于 svg，请参阅 code.google.com/p/chromium/issues/detail?id=413636。
-
我明白了，这很烦人，因为它违背了可缩放矢量图形的基本目的。 Tack så mycket Eric。
-
一种解决方法是为宽度和高度设置动画，请参阅xn--dahlstrm-t4a.net/svg/css/animations/zoom-transform.html。