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

【问题标题】：SVG D3: Display an element only within a specific group or a specific SVGSVG D3：仅在特定组或特定 SVG 中显示元素
【发布时间】：2018-06-05 15:46:54
【问题描述】：

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

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

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

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

同样可以在以下链接中看到：https://hitokun-s.github.io/old/demo/path-between-two-svg.html

但如果我这样使用它，我将无法设置内部 SVG 的样式。

提前致谢

【问题讨论】：

"但是如果我这样使用它，我将无法设置内部 SVG 的样式。"我不明白那句话。是什么阻碍了你？
可以使用 3 viewBoxes。
@ccprog 我的意思是，如果我使用内部和外部 SVG。我不想为内部 SVG 添加边框。希望这可以澄清。
@Alexander 是的，viewBox 可以在 SVG 中包含 SVG。但我无法设置内部 SVG 的样式。我想给内部 SVG 添加一个边框。
SVG 没有边框。只需使用<rect> 带笔触和不填充来模拟它。

标签： javascript d3.js svg

【解决方案1】：

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

这可以通过在 div 元素中包含“内部”SVG 来实现。

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

Div 元素可以使用foreignObject 元素放置在svg 中。然后“内部” SVG 被视为“外部”元素并且可以应用样式。

希望这对其他可怜的人有所帮助。

【讨论】：