Question

当<svg>浮动在另一个元素旁边时，我有一个非常奇怪的IE9显示模糊图形的情况。

这是我能提出的最简单的案例，类似于我们的应用程序：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/2000/svg">
<head>
    <meta content="IE=Edge,chrome=1" http-equiv="X-UA-Compatible">
    <title>IE9 SVG Resize Issue</title>

<script type="text/javascript">
window.onload = function() {

    var i = 0;
    var increaseWidth = function() {
        var w = 500 + i++;
        window.resizeTo(w, 500);
        document.getElementById('currentWidth').innerHTML = w + 'px';
    };

    document.getElementById('btn').addEventListener('click', increaseWidth);

    increaseWidth();
};
</script>

</head>
<body>

<div style="float: left; width: 20%">

Left
</div>

<div style="float: left; width: 80%">

  <svg width="200" height="200" version="1.1">

    <rect fill="#fff" stroke="#000" x="0.5" y="0.5" width="100" height="100" />

  </svg>

</div>


<span style="color: #999; display: block">NOTE: In IE9 you can only have one tab open to resize the window</span>
<button type="button" id="btn">Increase Width</button>
<span id="currentWidth" style="color: #666; font-size: 15pt"></span>

</body>
</html>

Here's a gallery显示从500px到507px的窗口大小调整。您可以看到，当调整大小一个像素时，矩形的线从模糊变为清晰。当两列具有百分比宽度时，似乎会发生错误。当div包含svg溢出到新行时（事情变得有些模糊），也会发生这种情况。 FWIW，在实际应用中我们使用的是Raphael.js。

是否存在与此相关的已知问题，是否有一个简单的方法可以保持线条清晰（通常通过0.5px修复偏移）？

调整大小时IE9 SVG模糊

0 个答案: