SVGグリッドの格子が半透明のFirefoxで

Question

私はSVGのグリッドにrectsの問題があります。

はここjsFiddleで私のコードの上にある：一度に1つの画素をプロットすることにより、正方形を作ることになっているhttps://jsfiddle.net/swpcpvxL/

。私は1×1のSVG rectを使ってピクセルをプロットします。

var svg = document.getElementById("mysvg"); 

for (var y = 50; y <= 150; ++y) { 
    for (var x = 50; x <= 150; ++x) { 
    var r = Math.floor((x + y)/250); 
    var g = Math.floor((Math.sin(x/10.0) + 1) * x); 
    var b = Math.floor((Math.sin(y/10.0) + 1) * x); 
    var color = "rgb(" + r + "," + g + "," + b + ")"; 

    var k = document.createElementNS("http://www.w3.org/2000/svg", "rect"); 
    k.setAttribute("x", x); 
    k.setAttribute("y", y); 
    k.setAttribute("width", "1"); 
    k.setAttribute("height", "1"); 
    k.setAttribute("style", "fill: " + color); 
    svg.appendChild(k); 
    } 
} 

私の問題は、Firefoxではrectが正しくプロットされないということです。それらは間違った色（洗い流されている）を示し、実際には半透明である。 Firefoxがアンチエイリアスや何かをやっているのは、rectちょうど私が望むピクセルにプロットするのではなく、rectで何か問題が起きていると思う。私もIEでテストしました。この問題はなく、コードは正しく動作します。私はテストするChromeを持っていません。

Firefoxの画像は、hereでアップロードされました。

画像でわかるように、私は円をrectで見ることができます。これは私が欲しいものではありません！

Firefoxの問題を解決するにはどうすればよいですか？あるいは、SVGにビットマップを生成してプロットするより良い方法がありますか？私はこの方法が少し遅いことに気付きました。おそらくもっと良いアプローチがあります。

ありがとうございます！

Answer 1

私はFirefoxでもこの問題を認識しています。何らかのブレンド問題のように見えます。ウィンドウを移動したりサイズを変更したりすると、画像「フリッカー」も表示されます。

回避策は、各矩形を1x1の代わりに2x2ボックスとしてプロットすることです。したがって、唯一の変更は次のとおりです。

k.setAttribute("width", "2"); 
k.setAttribute("height", "2"); 

一度に1ピクセルずつXとYにステップします。

このようにして、各矩形は各辺の1辺に1ピクセル重なります。それはあなたの100平方の全体を左右に1ピクセル大きくします。この方法を使用してそれを気にかけている場合は、原点を移動して補正することができます。