Question

我刚刚发现了填充图案作为填充svg元素的方法（我是新手）。

我非常喜欢这个样子。但是，当我有重叠元素时，我希望交叉区域显示“更密集”的填充，类似于我是否使用了填充不透明度的纯色填充＆lt; 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/

我曾以某种方式希望我创建的每个矩形都会被填充相同，在交叉点创建对比但唉，这不会发生！

这是我的第一个问题，我很乐意接受有关如何提出更好问题的反馈！谢谢！

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/

如何将svg元素与填充图案重叠以突出交集？

1 个答案: