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

【问题标题】：How to place a label in an area outside of an SVG path?如何在 SVG 路径之外的区域放置标签？
【发布时间】：2016-10-13 05:13:30
【问题描述】：

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

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

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

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

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

感谢您的建议！

【问题讨论】：

【解决方案1】：

你有一个概念错误。 getBBox 运行良好，做它必须做的事情：

第一步：你画水

第二步：逐层绘制土地等高线。（重叠的水）

第三步：获取LAND边界框（getBBox）。并将标签放在中心

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

最后你看不到 WATER 标签：

可能的解决方案 A：将 WATER 级别视为另一层（修改数据）

可能的解决方案 B：这只是一个想法：您可以从非常低的层创建一个蒙版，并用于将 WATER 盒子作为 cookie 切割器进行蒙版。我认为 getBBox 会给你最终形状的正确尺寸。

推荐：在不同的浏览器上试用。 Firefox 的 getBBox 存在错误：您可以在此处查看：https://bugzilla.mozilla.org/show_bug.cgi?id=612118 尚未解决

【讨论】：