请检查下面的示例 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 元素中使用此属性?
谢谢。
最佳答案
text-overflow 不是当前 SVG 1.1 的一部分。标准。
新的 SVG 2 规范正在进行中并且 text-overflow计划包含在其中。 UA 开始实现 SVG 2,但到目前为止只有 Opera 12 实现了文本溢出。
与此同时,您也许可以通过 foreignObject 将文本包含为 html,因为 html 文本确实支持文本溢出。
关于css - 文本溢出不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20628173/