我在页眉中放置了一个SVG图像。图像有一个固定的宽度，当我向下滚动时，我会在标题中添加一个CSS类来更改图像的宽度。它工作正常，除了它在IE11和Edge中闪烁，在Chrome中工作正常。
img {
transition: width 5s ease;
}
有什么办法解决这个问题吗？
Fiddle：https://jsfiddle.net/xpvt214o/980754/
不要转换宽度，而是使用CSS Transform。使用transform: scale(0.5);和以过渡为目标的变换，您将在不需要重新绘制的情况下获得所需内容，并且您将获得更平滑的动画。
这是你最新的小提琴：https://jsfiddle.net/kyawjn4s/1/
不要使用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/
另一个解决方案是将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>
将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;