6

我需要的是截断文本，使其填充svg矩形的大小，然后在mouse-over. 我曾尝试使用 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);
}

我已经svg使用创建了所有元素javascript，这是我id为文本元素创建的地方

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

我最好的猜测是svg创建一个不能被截断的图像css......仍然需要一个解决方案。提前致谢

4

2 回答 2

4

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

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

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

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

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

于 2013-07-10T15:10:26.210 回答
-1

我认为以下网址会对您有所帮助

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

于 2013-07-09T12:29:30.973 回答