javascript - サイズ変更時にIE9 SVGがぼやける

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>

ウィンドウのサイズをから500pxに変更するギャラリー507pxを次に示します。1 ピクセルずつサイズを変更すると、長方形の線がぼやけてから鮮明になることがわかります。パーセンテージ幅の 2 つの列がある場合にバグが発生するようです。div含まれているが新しい行にオーバーフローした場合にも発生する可能性がありsvgます (物事が少しぼやけます)。実際のアプリケーションでは、Raphael.js を使用しています。

これに関連する既知の問題はありますか? また、行を鮮明に保つための簡単な修正方法はあり0.5pxますか? (修正による通常のオフセットを使用して)

javascript - サイズ変更時にIE9 SVGがぼやける

0 に答える 0

Related

Reference