减少svg文本的区域

Question

I am currently creating a word cloud using an in house developed library, it uses the svg element text to display the words, the problem I have encounter is that the area of some words sometimes overlaps other words as you can see if you inspect test1 in this jsfiddle , this becomes a problem if the words must be clickable.

I want to know if it is possible to reduce the area of the text to the minimum, just wrapping the word, a small padding is accepted.

I have already tried the solution posted in this answer but it didn't work.

I would prefer a css solution if it exists rather than messing with svg but if there is no other option that will do.

Edit: Ok, enough reputation to post images. What I currently have:

What I would like to have:

Answer 1

There are two problems; I currently have only a solution to one. Your text example is misleading. Try Text1g instead to see the descent (ie the amount of space below the baseline which the g needs). If you do this, then you'll see that the texts really overlap - you just don't notice because your test text doesn't contain a good set of test characters.

Apart from that, I see that the element is 67px high while the font-size is only 60px. I don't see where the additional 7 pixels are coming from. It's not padding and not margin :-/

Answer 2

Why do you need to know the minimum bounding box?

If it is because you are linking with the element, or applying click events to the words, then you should investigate the pointer-events attribute.

You possibly want something like:

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

You will only get events when the pointer is over the fill of the words. This might be a bit fiddly for clicking though because the holes in words will not be clickable.

You could ease that by putting an invisible <rect> of an appropriate size in front of the word with pointer-events="fill" . The "fill" value will attract events for where the fill would be even if it is invisible. However that requires you know the bbox of the word, which we already established you don't have (?).

You could give the words an invisible fat stroke and use pointer-events="all" . The invisible stroke will make the clickable area (invisbly) fatter and hence the inter-word holes smaller.