Javascript 如何在SVG路径之外的区域中放置标签？

我正在创建一个HTML5画布映射应用程序，它使用生成SVG。我需要标记计算路径之外的某些区域的质心

例如，我想在两个蓝色区域中的每个区域内放置一个标签：

绿色区域是由D3计算的SVG路径，蓝色的“水”区域是背景，显示“陆地”多边形未覆盖的区域

对于其他具有D3生成路径的多边形，我使用了

.getBBox（）

，但是对于这些区域，边界框是整个SVG

演示如何使用

.getBBox（）

在SVG的“land”部分放置标签-在本例中，我想在右下角的蓝色“water”部分放置第二个标签

---

谢谢你的建议

您有一个概念错误。getBBox运行良好，并完成它必须完成的任务：

步骤1：你取水

步骤2：逐层绘制土地等高线。（重叠水）

步骤3：获取陆地边界框（getBBox）。然后把标签放在中间

步骤4：获取水边界框（getBBox）。然后把标签放在中间

最后，您将看不到水标签：

<强>正解A < /强>：将水位视为另一层（修改数据）

可能的解决方案B：这只是一个想法：您可以从非常低的层创建一个遮罩，用于将水箱遮罩为饼干切割器。我认为getBBox将为您提供合适的大小和最终形状

---

推荐：在不同的浏览器上试用。Firefox在getBBox中有一个bug：您可以在这里看到：尚未解决

请提供一个片段或提琴，以便我们可以看到发生了什么。这是一个很好的问题说明-我的问题是：如何从现有SVG路径和/或数据创建水层？