Javascript 截断svg文本以适应矩形

我需要的是截断一个文本，使其填充

svg

矩形的大小，然后在

鼠标悬停

上弹出到其全尺寸。 我试过使用css，使用下面的代码隐藏文本，然后弹出，但它似乎不起作用

#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);
}

我已经使用

javascript

创建了所有

svg

元素，这就是我为文本元素创建

id

的地方

text.setAttributeNS（null，“id”，“text_trunc”）

我最好的猜测是
svg
创建了一个不能被
css
截断的图像……仍然需要一个解决方案。提前谢谢
我想下面的url会对你有所帮助

CSS属性“overflow”在SVG中不起作用，因为
元素没有要溢出的“box”

您可以尝试使用“剪辑路径”属性。它是SVG特有的CSS属性。您需要在SVG中定义一个剪辑路径，该路径的大小与截断框的大小相同。然后使用CSS规则添加和删除它

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

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

不幸的是，这个解决方案不允许像自动椭圆这样的更奇特的行为