Question

我在SVG中使用rects网格时出现问题。

以下是我在jsFiddle的代码：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中看到了这个问题。它确实看起来像某种混合问题。您还可以看到图像＆＃34;闪烁＆＃34;如果您移动窗口或调整其大小。

解决方法是将每个矩形绘制为2x2框，而不是1x1。所以唯一的变化就是：

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

你仍然一次踩X和Y一个像素。

这样每个矩形每边重叠1个像素。它将使整个100平方的像素在右侧和底部变大。如果您使用此方法并关心它，您可能希望将原点移动以进行补偿。

SVG网格在Firefox

1 个答案: