我正在使用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),但这些解决方案都不起作用。
造成这种额外空白/重叠的原因是什么?我如何修复它以使颜色整齐排列,就像前两种情况一样?
答案 0 :(得分:2)
尝试将stroke-width属性设置为0
答案 1 :(得分:0)
那是抗锯齿的。将style =“shape-rendering:crispEdges”添加到<div>
元素,它将消失。如果您想要作为属性或样式,可以将它添加到形状本身。
要做的另一件事是add 0.5 to the y co-ordinates of your shapes有更多关于其工作原理的信息here