如何將svg元素與填充圖案重疊以突出交叉點？

Question

我剛剛發現了孵化模式作爲填充svg元素的一種方式（我是一個新手）。

我非常喜歡這種外觀。 然而，當我有重疊的元素，我想交叉區域，以顯示一個「更密集的」填充，類似於如果我曾使用純色填充填充不透明度< 1.

相反雖然，重疊元件（邊界除外）看起來像是從同一塊布上剪下來的。

這裏是與D3創建了兩個rects一個例子：

var svg = d3.select("body").append("svg"); 

svg.append('defs') 
    .append('pattern') 
    .attr('id', 'diagonalHatch') 
    .attr('patternUnits', 'userSpaceOnUse') 
    .attr('width', 8) 
    .attr('height', 8) 
    .append('path') 
    .attr('d', 'M-2,2 l4,-4 M0,8 l8,-8 M6,10 l4,-4') 
    .attr('stroke', "red") 
    .attr('stroke-width', 1); 

svg.append("rect") 
    .attr("x", 20) 
    .attr("y", 20) 
    .attr("width", 200) 
    .attr("height", 100) 
    .attr('fill', 'url(#diagonalHatch)') 
svg.append("rect") 
    .attr("x", 106) 
    .attr("y", 50) 
    .attr("width", 200) 
    .attr("height", 100) 
    .attr('fill', 'url(#diagonalHatch)') 

http://jsfiddle.net/saipuck/DQfCp/2/

我在某種程度上希望每個RECT我創造會得到相同的填充，從而在路口的對比度，但很可惜，那不會發生！

這是我的第一個SO問題，我會很樂意接受關於如何提出更好的問題的反饋！謝謝！

Answer 1

問題是該模式與您的兩個矩形處於相同的座標空間。

實現所需效果的一種方法是使用變換將兩個矩形放置在不同的座標空間中。

var svg = d3.select("body").append("svg"); 

svg.append('defs') 
    .append('pattern') 
    .attr('id', 'diagonalHatch') 
    .attr('patternUnits', 'userSpaceOnUse') 
    .attr('width', 8) 
    .attr('height', 8) 
    .append('path') 
    .attr('d', 'M-2,2 l4,-4 M0,8 l8,-8 M6,10 l4,-4') 
    .attr('stroke', "red") 
    .attr('stroke-width', 1); 

svg.append("rect") 
    .attr("transform", "translate(20,20)") 
    .attr("width", 200) 
    .attr("height", 100) 
    .attr('fill', 'url(#diagonalHatch)') 
svg.append("rect") 
    .attr("transform", "translate(106,50)") 
    .attr("width", 200) 
    .attr("height", 100) 
    .attr('fill', 'url(#diagonalHatch)') 

演示在這裏：http://jsfiddle.net/DQfCp/4/