Question

在Chrome，MacO上，我对SVG图像和过渡有这个问题：当图形动画时，它会变得模糊。

在一个项目中，它只发生在视网膜屏幕上，但我做了一个重现这个问题的jsfiddle：http://jsfiddle.net/0c2x7LaL/

<svg height="100" width="100" id="circle">
 <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

#circle {
 transform: scale(1);
    transition: transform 2s ease;
}
#circle:hover {
    transform: scale(10);
}

它不会在Firefox上模糊，只在Chrome上......任何想法？

更新了JSFiddle

（使用translateZ（0）和背面可见性，仍然相同）

http://jsfiddle.net/0c2x7LaL/1/

Answer 1

在进行CSS动画时，Chrome似乎在转换期间使用原始大小的栅格。

一种解决方案是使用SVG动画。

<svg height="1000" width="1000" id="circle">
  <circle cx="500" cy="500" r="40" stroke="black" stroke-width="3" fill="red">
    <animate fill="freeze" dur="2s" to="400" from="40" 
                  attributeName="r" begin="mouseover"/>
    <animate fill="freeze" dur="2s" to="40" from="400"
                  attributeName="r" begin="mouseout"/>
  </circle>
</svg>

Demo fiddle

如果您想坚持使用CSS动画，另一种解决方案是将大尺寸设为“原始”。然后反转缩放操作。

#circle {
    transform: scale(0.1);
    transition: transform 2s ease;
}
#circle:hover {
    transform: scale(1);
}

Demo fiddle

这是否适用于您取决于您的具体情况。

Answer 2

我没有使用CSS transform: scale();，而是将其转换为width。

在这种情况下（img with SVG）：

img {
    width: 300px;
    transition: width 2s ease;
}
img:hover {
    width: 10000px;
}

DEMO：http://jsfiddle.net/0c2x7LaL/4/

转换时SVG图像/形状放大模糊

2 个答案: