Question

我有这个小提琴：https://jsfiddle.net/thatOneGuy/1spn8nne/1/

这有两条路径，目前它们只是矩形但实际上是复杂的形状。我已经使用这段代码创建了两个带有'holes'的rects：

createRects(dataPointsPath2, 'blue');
createHoles(dataPointsCircle2);
createRects(dataPointsPath1, 'red');
createHoles(dataPointsCircle1);

我需要的是从填充路径中移除的孔，以便您可以看到它背后的矩形。

如何从填充路径中删除形状（圆圈）？

编辑

我刚刚意识到，剪辑路径可能会很好用，我会尝试实现，但如果有人有任何想法，我会很感激帮助：）

Answer 1

这是绘制带孔的矩形的一种方法。它依赖于偶数填充规则。圆形在矩形内部，它成为矩形中的一个洞，蓝色背景显示出来。

＆＃13;

  <svg viewBox="0 0 250 250">
  <rect width="100%" height="100%" fill="blue"/>
    <path fill="#b4edb4" fill-rule="evenodd"  d="M230,230H8V13h223
	 V236z M 120 80 a 50 50 0 1 0 0.00001 0z"/>
</svg>

＆＃13;

Answer 2

@Robert Longson给出了一个很好的答案，但我无法使用我的数据集和D3复制它。所以，感谢@PaulLeBeau关于masks的观点。

对于面具，你需要一个矩形元素，填充白色才能工作。它使用它来知道要屏蔽的内容（我认为）。

var thisMask = thisContainer.append("svg:mask")
    .attr("id", board + '_mask')

  thisMask.append("rect")
    .attr('x', 0)
    .attr('y', 0)
    .attr('width', "100%")
    .attr('height', "100%")
    .style('fill','white')

在同一个蒙版元素中，您需要从路径中删除其余形状。

所以在我的情况下，我想要一个圆圈集合：

thisMask.selectAll('.circle')
    .data(data)
    .enter()
    .append("circle")
    .attr('cx', function(d) {
      console.log('clippath', d)
      return d.x
    })
    .attr('cy', function(d) {
      return d.y
    })
    .attr('r', function(d) {
      return d.radius
    })

就是这样。我更新了小提琴：https://jsfiddle.net/thatOneGuy/1spn8nne/4/

如何从填充的SVG路径中删除形状

2 个答案: