Как перекрывать элементы svg с шаблонами штриховки, чтобы подчеркнуть пересечение?

Question

Я только что обнаружил шаблоны штриховки как способ заполнить элемент svg (я новичок).

Мне очень нравится. Однако, когда у меня есть пересекающиеся элементы, я хотел бы область пересечения, чтобы показать «плотнее» заливку, сродни, если бы я использовал сплошной цвет заправить заполняющую непрозрачность < 1.

Вместо хотя, перекрывающиеся элементы (за исключением границы) выглядят так, как будто они были вырезаны из одного куска ткани.

Ниже приведен пример с двумя прямоугольниками, созданных с 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/

я как-то надеялся каждый Rect я создал бы наполняюсь одинаково, создавая контраст в пересечении, но увы, что не происходит!

Это мой первый вопрос, я с радостью принимаю отзывы о том, как задавать лучшие вопросы! Благодаря!

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/