SVG D3：仅在特定组或特定SVG中显示元素

Question

有没有办法只在特定的组中显示D3元素？

让我们说，我在SVG中并排有2个rect元素。我想只在第一个矩形内显​​示一个圆圈。如果圆圈移动到第二个矩形元素位置，则圆圈不应显示在第二个矩形上。

这可以通过在SVG元素中使用SVG元素来实现，如下图：

<svg id="outer">
  <svg id="inner1">
  </svg>
  <svg id="inner2">
  </svg>
</svg>

在下面的链接中可以看到相同的内容：https://hitokun-s.github.io/demo/path-between-two-svg.html

但如果我像这样使用它，我就无法设计内部SVG。

提前致谢

Answer 1

经过数小时的搜索，回答我自己的问题。

这可以通过内部＆＃34;来实现。 SVG位于div元素内。

<svg id="outer">
  <foreignObject>
    <div>
      <svg id="inner" style="border-radius: 20px; border: 1px solid red;">
      </svg>
    </div>                
  </foreignObject>
</svg

Div元素可以使用svg元素放置在foreignObject中。那么＆＃34;内部＆＃34; SVG被视为＆＃34;外部＆＃34;元素和样式都可以应用。

希望这有助于任何其他可怜的灵魂。