css - 文本溢出不起作用

Question

请检查下面的示例 svg 代码。我在文本元素中使用了文本溢出属性。但是，属性行为无法正常工作。

<svg width="180" height="120" viewBox="0 0 180 120">
<style>
  text { font: 16px sans-serif; }
  rect { fill: none; stroke: black; vector-effect: non-scaling-stroke; stroke-width: 1; }
</style>

<g>
<rect x="19.5" y="16.5" width="100" height="20"/>
<text x="20" y="2em" width="100">SVG is awesome</text>
</g>

<g transform="translate(0,30)">
<rect x="19.5" y="16.5" width="100" height="20"/>
<text x="20" y="2em" width="100" text-overflow="clip">SVG is awesome</text>
</g>

<g transform="translate(0,60)">
<rect x="19.5" y="16.5" width="100" height="20"/>
<text x="20" y="2em" width="100" text-overflow="ellipsis">SVG is awesome</text>
</g>
</svg>

SVG-text 元素是否支持 text-overflow 属性？我如何在 svg 元素中使用此属性？

谢谢。

Answer 1

text-overflow 不是当前 SVG 1.1 的一部分。标准。

新的 SVG 2 规范正在进行中并且 text-overflow计划包含在其中。 UA 开始实现 SVG 2，但到目前为止只有 Opera 12 实现了文本溢出。

与此同时，您也许可以通过 foreignObject 将文本包含为 html，因为 html 文本确实支持文本溢出。