SVG Gitter von Rectats in Firefox transparent

Question

Ich habe ein Problem mit einem Raster von rects in einem SVG.

Hier ist mein Code über bei jsFiddle: https://jsfiddle.net/swpcpvxL/

Es soll durch Auftragen ein Pixel in einer Zeit, einen Platz machen. Ich benutze eine 1 von 1 SVG rect, um ein Pixel zu plotten.

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); 
    } 
} 

Mein Problem ist, dass auf Firefox die rect nicht korrekt plotten. Sie zeigen die falsche Farbe (ausgewaschen) und sind tatsächlich durchscheinend. Ich denke, das Problem ist, dass Firefox Anti-Aliasing oder etwas auf der rect s statt nur die rect direkt auf dem Pixel, den ich will, plotten. Ich habe auch auf IE getestet - es hat dieses Problem nicht und der Code funktioniert korrekt. Ich habe kein Chrome zum Testen.

Ich habe ein Bild von dem, was es für mich aussieht, in Firefox here hochgeladen. Wie Sie auf dem Bild sehen können, kann ich die Kreise durch die rect s sehen. Das ist nicht was ich will!

Wie kann ich das Firefox-Problem beheben? Oder gibt es eine bessere Möglichkeit, eine Bitmap in einer SVG wie diese zu erzeugen und zu plotten? Ich habe bemerkt, dass diese Methode ein bisschen langsam ist, also gibt es vielleicht einen besseren Ansatz.

Danke!

Answer 1

Ich sehe das Problem auch in meinem Firefox. Es sieht wie ein Mischproblem aus. Sie können das Bild auch "flackern" sehen, wenn Sie das Fenster verschieben oder seine Größe ändern.

Eine Arbeit herum ist, jedes Rect als eine 2x2-Box anstelle von 1x1 zu plotten. Die einzige Änderung ist also:

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

Sie treten immer noch um ein Pixel auf X und Y auf.

Auf diese Weise überlappt jedes rect das auf jeder Seite um 1 Pixel. Es wird Ihr ganzes 100 Quadrat ein Pixel größer rechts und unten machen. Vielleicht möchten Sie den Ursprung verschieben, um zu kompensieren, wenn Sie diese Methode verwenden und sich darum kümmern.