Truncating svg text to fit a rect

Question

What i need is to truncate a text so that it fills the size of a svg rectangle and then popup to its full-size on mouse-over. I have tried with css using the following code to hide the text and then popup but it doesnt seem to work.

#text_trunc {
    width: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#text_trunc:hover{
    overflow: visible; 
    white-space: normal; 
    width: auto;
    position: absolute;
    background-color: rgba(0,0,0,0);
}

I have created all the svg elements using javascript and this is where i create an id for the text element

text.setAttributeNS(null, "id", "text_trunc");

My best guess is that svg creates an image which cannot be truncated by css...still need a solution. Thanks in advance

Answer 1

The "overflow" CSS property won't work in SVGs because <text> elements have no "box" to overflow.

You could try experimenting with the "clip-path" property instead. It is a CSS property specific to SVGs. You would need to define a clip path in your SVG that was the size of the truncated box. Then add and remove it with your CSS rules.

#text_trunc {
    clip-path: url(#truncbox);
}

#text_trunc:hover{
    clip-path: none;
}

Unfortunately, this solution doesn't allow for fancier behaviour like automatic ellipses.