Question

我正在使用d3.js以这种方式生成一些直接在彼此之上的rects：

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")（建议here）和.attr("stroke", "none")添加到rect元素，并将rect元素包装在一个元素中g中的svg元素以及{em> （建议here），但这些解决方案都不起作用。

造成这种额外空白/重叠的原因是什么？我如何修复它以使颜色整齐排列，就像前两种情况一样？

Answer 1

尝试将stroke-width属性设置为0

Answer 2

那是抗锯齿的。将style =“shape-rendering：crispEdges”添加到<div>元素，它将消失。如果您想要作为属性或样式，可以将它添加到形状本身。

要做的另一件事是add 0.5 to the y co-ordinates of your shapes有更多关于其工作原理的信息here

为什么不存在矩形元素之间的空格/“重叠”？

2 个答案: