2014-05-19 63 views
3

我目前使用內部開發的庫創建一個詞雲,它使用svg元素text來顯示這些詞,我遇到的問題是某些詞的區域有時與其他詞重疊爲你可以看看你是否在這個jsfiddle中檢查test1,如果單詞必須是可點擊的,這將成爲一個問題。減少svg文本的面積

我想知道是否有可能將文本的面積減小到最小,只是將這個單詞包起來,接受一個小的填充。

我已經試過this回答的解決方案,但它沒有工作。

我寧願css解決方案,如果它存在,而不是搞亂svg,但如果沒有其他選項,將做。

編輯:好的,足夠的聲望來發布圖像。我目前有:

enter image description here

我想什麼有:

enter image description here

回答

0

有兩個問題;我目前只有一個解決方案。您的文字示例具有誤導性。嘗試使用Text1g來觀察下降(即g需要的基線以下的空間量)。如果你這樣做,那麼你會看到文本真的重疊 - 你只是沒有注意到,因爲你的測試文本不包含一組好的測試字符。

除此之外,我看到元素是67px高,而font-size只是60px.我看不到額外的7個像素來自哪裏。這不是填充而不是保證金: -/

0

爲什麼你需要知道最小邊界框?

如果是因爲您正在鏈接元素或將單擊事件應用於單詞,那麼您應該調查pointer-events屬性。

你可能想要的東西,如:

<text ... pointer-events="fill">ejecutar</text> 

你將只能得到事件當指針超過的話填充。這可能是一個點擊fiddly雖然因爲單詞的孔不會點擊。

您可以通過在pointer-events="fill"的單詞前面放置一個合適大小的隱形<rect>來緩解這個問題。 「填充」值將吸引即使填充不可見的情況下的事件。但是,這要求你知道我們已經建立的這個詞的Bbox,你沒有(?)。

你可以給一個看不見的脂肪筆畫和使用pointer-events="all"。不可見的筆劃將使可點擊區域(無形)變得更胖,因此字間孔更小。