Question

请查看以下示例svg代码。我在text元素中使用了text-overflow属性。但是，财产行为不能正常运作。

<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文本元素是否支持文本溢出属性？我怎样才能在svg元素中使用这个属性？

感谢。

Answer 1

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

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

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

文本溢出无效

1 个答案: