如何在SVG路徑以外的區域放置標籤？

我正在創建一個使用D3 contour plugin生成SVG的HTML5畫布貼圖應用程序。我需要標記計算路徑之外某些區域的質心。如何在SVG路徑以外的區域放置標籤？

例如，我想放置一個標籤內的各兩個藍色區域：

綠色區域是由D3計算的SVG路徑，和藍色的「水」區是背景通過「土地」多邊形未覆蓋的區域展示。

對於其他具有D3生成路徑的多邊形，我使用了.getBBox()，但對於這些區域，邊界框是整個SVG。

This codepen演示如何在SVG的「land」部分使用.getBBox() - 在此示例中，我要在右下角的藍色「水」部分放置第二個標籤。

感謝您的諮詢！

2016-06-12 rfboyce

請提供一個片段或小提琴，所以我們可以看到發生了什麼。 –

已更新w example – rfboyce

你有一個概念錯誤。 getBBox運作良好，並做它必須做的事：

步驟1：通過圖層繪製土地輪廓層：你打水

步驟2。（Overlaping WATER）

步驟3：獲得土地邊界框（getBBox）。並把標籤上的中心

步驟4：把水邊界框（getBBox）。並把標籤上的中心

在最後你不能見水標籤：

更多鈔票液A：考慮水位另一層（修改您的數據）

可能的解決方案B：這只是一個想法：您可以從非常低的層創建一個面具，並用於將水箱掩飾爲餅乾切割器。我認爲getBBox會給你合適的大小最終形狀。

Recomendation：嘗試在型動物的瀏覽器。Firefox有一個getBBox的bug：你可以在這裏看到：https://bugzilla.mozilla.org/show_bug.cgi?id=612118還沒有解決

2016-06-14 20:42:10 Klaujesi

這是一個很好的例子 - 我的問題是：如何從現有的SVG路徑和/或數據創建水層？ – rfboyce

我已經更新了答案並添加了工作小提琴：https：//jsfiddle.net/j6v35mhs/ – Klaujesi

回答