javascript - chop svg 文本以适应矩形

Question

我需要的是 chop 文本，使其填充 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 chop 的图像……仍然需要一个解决方案。提前致谢

Answer 1

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

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

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

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

不幸的是，此解决方案不允许自动省略号等更奇特的行为。