1

我刚刚发现了填充图案作为填充 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/

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

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

4

1 回答 1

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/

于 2013-10-06T01:50:43.060 回答