Question

我在标头中放置了SVG图片。图片具有固定的宽度，当我向下滚动时，我在标题中添加了CSS类以更改图片的宽度。除了在IE11和Edge中闪烁外，在Chrome中也可以正常工作，一切正常。

img {
  transition: width 5s ease; 
}

有什么办法解决这个问题吗？

提琴： https://jsfiddle.net/xpvt214o/980754/

Answer 1

使用CSS Transform而不是转换宽度。使用transform: scale(0.5);和过渡目标转换，无需重新绘制即可获得所需的内容，并且动画更加流畅。

这是您更新的小提琴：https://jsfiddle.net/kyawjn4s/1/

Answer 2

另一种解决方案是将SVG内联。在Edge和IE 11中运行正常。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG inline</title>
<style>
svg{width:200px;transition:width .5s}
svg:hover{width:500px;}
</style>
</head>
<body>
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="yellow" />
</svg>
</body>
</html>

Answer 3

尝试使用img，而不要使用object标签。它甚至为您提供了一个后备选项，并解决了IE / Edge上的闪烁问题。它也应该在较旧的浏览器上工作。

示例

<object data="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/adobe.svg" type="image/svg+xml" width="200">
    <!--Fallback image for older browsers -->
    <img src="http://placehold.it/250x200" />
</object>

我已经为您更新了jsfiddle：https://jsfiddle.net/axdetm4h/

Answer 4

将CSS更改为：

-webkit-transition: width 5s ease;
-moz-transition: width 5s ease;
-ms-transition: width 5s ease;
-o-transition: width 5s ease;
transition: width 5s ease;

SVG上的CSS过渡导致闪烁的IE11和Edge

4 个答案: