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

Question

3

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

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

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

对于其他具有D3生成路径的多边形，我已经使用了.getBBox()，但对于这些区域，包围盒是整个SVG。这个CodePen演示了在SVG的“陆地”部分放置标签，使用.getBBox() - 在这个例子中，我想在右下角的蓝色“水”部分放置第二个标签。

感谢您的建议！

- rfboyce

请提供一个代码片段或者fiddle，以便我们查看发生了什么。 - Paul LeBeau

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Klaujesi · Answer 1

你有一个概念错误。getBBox 很好地工作并且做了它该做的事情： 步骤 1：你画出了 WATER。

步骤2：逐层绘制土地轮廓。（与水重叠）

步骤三：获取土地边界框（getBBox）。并将标签放置在中心位置。

步骤四：获取WATER边界框（getBBox）。并将标签放置在中心位置。

最后你看不到WATER标签：

可能的解决方案 A：将水位考虑为另一层（修改您的数据）

可能的解决方案 B：这只是一个想法：您可以从非常低的层创建一个掩码，并用它来掩盖WATER框作为切饼器。我认为getBBox会给你最终形状的正确大小。

推荐：在不同的浏览器上尝试一下。Firefox 在使用 getBBox 时会出现 bug：可以在这里看到：https://bugzilla.mozilla.org/show_bug.cgi?id=612118目前还未解决