截断 svg 文本以适合矩形答案

【问题标题】：Truncating svg text to fit a rect截断 svg 文本以适合矩形
【发布时间】：2013-07-07 01:04:20
【问题描述】：

我需要截断文本，使其填充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);
}

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

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

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

【问题讨论】：

标签： javascript jquery css svg truncate

【解决方案1】：

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

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

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：