我正在创建一个使用 D3 contour plugin 的 HTML5 Canvas 映射应用程序生成 SVG。我需要标记计算路径之外的某些区域的质心。
例如，我想在两个蓝色区域中分别放置一个标签:
绿色区域是 D3 计算的 SVG 路径，蓝色“水”区域是通过未被“陆地”多边形覆盖的区域显示的背景。
我对具有 D3 生成路径的其他多边形使用了 .getBBox()，但对于这些区域，边界框是整个 SVG。
This codepen演示了使用 .getBBox() 在 SVG 的“陆地”部分放置标签 - 在本例中，我想在右下角的蓝色“水”部分放置第二个标签。
感谢您的建议!
最佳答案
你有一个概念错误。 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 还没解决
关于javascript - 如何在 SVG 路径之外的区域放置标签？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37778667/