截断svg文本以适合rect

Question

我需要的是截断文本，使其填充svg矩形的大小，然后在mouse-over弹出其全尺寸。 我已经尝试使用以下代码隐藏文本，然后弹出，但它似乎没有工作。

#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截断的图像...仍然需要一个解决方案。 提前致谢

Answer 1

“溢出”CSS属性在SVG中不起作用，因为<text>元素没有“box”溢出。

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

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

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

不幸的是，这种解决方案不允许像自动椭圆这样的更漂亮的行为。

Answer 2

我认为以下网址将帮助您

http://css-tricks.com/forums/discussion/12984/css-display-hidden-text-on-rollover/p1