爲什麼在應該不存在的矩形元素之間存在空白/「重疊」？

我使用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元件，以及所述svg內包裝都在一個g元件的rect元素和添加到.attr("stroke-rendering", "crispEdges")該（建議here），但既不這些解決方案的工作。

什麼導致這個額外的空白/重疊，以及如何去修復它，使顏色整齊排列，就像前兩種情況一樣？

來源

2013-07-04 3cheesewheel

這是反鋸齒。將style =「shape-rendering：crispEdges」添加到<div>元素，它將消失。如果你想要作爲屬性或樣式，你可以將它添加到形狀本身。

其他的事情做的是add 0.5 to the y co-ordinates of your shapes有關於爲什麼工作here

來源

2013-07-04 07:01:47

你是說像這樣的更多信息？ http://jsfiddle.net/ysim/K6pfD/ 它似乎沒有做任何事情。還是你的意思是與上面提到的東西結合在一起？ – 3cheesewheel

當然，這可以幫助我在Firefox上修復它（儘管您錯過了前兩項）。 –

奇怪。在Chrome中，對於'.green-green'，即使沒有'style = shape-rendering：crispEdges'，也沒有空格，但是在Firefox中有一個空格，*由'crispEdges'修復。儘管如此，我仍然在兩個瀏覽器中看到'.green-blue'的問題。 – 3cheesewheel

嘗試將stroke-width屬性設置爲0

來源

2013-07-04 02:23:36

爲什麼在應該不存在的矩形元素之間存在空白/「重疊」？

回答

相關問題