How to overlap svg elements with hatch patterns to accentuate intersection?

I just discovered hatch patterns as a way to fill an svg element (I'm a newbie).

I like the look very much. However, when I have overlapping elements, I would like the intersection area to show a "denser" fill, akin to if I had used a solid color fill with fill-opacity < 1.

Instead though, the overlapping elements (except for the border) look like they were cut from same piece of cloth.

Here is an example with two rects created with d3:

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/

I had somehow hoped each rect I created would get filled identically, creating the contrast in the intersection but alas, that does not occur!

This being my 1st SO question, I'll happily accept feedback on how to ask better questions as well! Thanks!

Solution

The issue is that the pattern is in the same coordinate space as your two rectangles.

One way to achieve the effect you want is to use a transform to put the two rectangles in a different coordinate space to the pattern.

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)')

Demo here: http://jsfiddle.net/DQfCp/4/