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

Question

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

例如，我想在两个蓝色区域中分别放置一个标签:

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

我对具有 D3 生成路径的其他多边形使用了 .getBBox()，但对于这些区域，边界框是整个 SVG。

This codepen演示了使用 .getBBox() 在 SVG 的“陆地”部分放置标签 - 在本例中，我想在右下角的蓝色“水”部分放置第二个标签。

感谢您的建议!

Answer 1

你有一个概念错误。 getBBox 运行良好并且可以做它必须做的事情:

第一步:你画水

第 2 步:逐层绘制陆地轮廓。 (重叠水)

第三步:获取LAND边界框(getBBox)。并将标签放在中心

第四步:获取WATER边界框(getBBox)。并将标签放在中心

最后看不到WATER标签:

可能的解决方案 A:将 WATER 级别视为另一层(修改您的数据)

Posible solution B:这只是一个想法:您可以从非常低的层创建一个 mask ，并将 WATER box 用作 cookie cutter 的 mask 。我认为 getBBox 会给你正确的尺寸和最终形状。

建议:在不同的浏览器上尝试一下。 Firefox 有一个 getBBox 错误:你可以在这里看到它:https://bugzilla.mozilla.org/show_bug.cgi?id=612118 还没解决