logo标签列表

将SVG文本截断以适应矩形

javascriptjquerycsssvgtruncate
6
我需要截断文本，使其填充一个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 截断...仍需要解决方案。提前致谢。
2个回答
4

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

您可以尝试使用“clip-path”属性来实现。这是一个专门针对SVG的CSS属性。您需要在SVG中定义一个与被截断的框尺寸相同的剪辑路径，然后使用CSS规则添加和删除它。

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

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

很遗憾，这个解决方案不能实现更高级的行为，例如自动省略。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接