2

<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>

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

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

4

0 回答 0