为什么不应该有的矩形元素之间有空格/"overlap"？

Question

我使用d3.js生成一些直接位于另一个之上的矩形，如下所示：

var greenRed = d3.select(".green-red").append("svg")
    .attr("height", 120);
greenRed.append("rect")
    .attr("fill", "green")
    .attr("x", 0)
    .attr("y", 0)
    .attr("height", 50)
    .attr("width", 300);
greenRed.append("rect")
    .attr("fill", "red")
    .attr("x", 0)
    .attr("y", 50)
    .attr("height", 50)
    .attr("width", 300);

我注意到，根据哪种颜色叠加在一起，矩形之间要么有一个非常薄的空白，要么两种颜色有某种"重叠"。

你可以看到我在这把小提琴里的意思：http://jsfiddle.net/ysim/PrC7X/

你可以看到，对于.green-green和.green-grey，没有问题（无论如何，对肉眼来说）；但对于.green-blue和.red-blue，存在重叠，并且对于.green-red，存在额外的空白。

我尝试过将.attr("stroke-rendering", "crispEdges")（此处建议）和.attr("stroke", "none")添加到rect元素中，以及将两个rect元素包装在svg内的g元素中，并将.attr("stroke-rendering", "crispEdges")添加到中（此处推荐），但这两种解决方案都不起作用。

是什么导致了这种额外的空白/重叠，我该如何修复它，使颜色整齐对齐，就像前两种情况一样？

Answer 1

尝试将笔划宽度属性设置为0

Answer 2

这就是抗锯齿。将style="shape rendering:crispEdges"添加到<div>元素中，它就会消失。如果您想将其作为属性或样式，可以将其添加到形状本身。

另一件事是在形状的y坐标上加0.5。这里有更多关于为什么有效的信息