Переполнение текста не работает

Question

Пожалуйста, проверьте приведенный ниже пример кода svg. Я использовал свойство 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-text поддержкой переполнения текста? Как я могу использовать это свойство в элементе svg?

Спасибо.

Answer 1

text-overflow не является частью текущего SVG 1.1. стандарт.

Выполняется новая спецификация SVG 2, и в нее планируется включить text-overflow. UAs начинают реализовывать SVG 2, но только Opera 12 реализовала переполнение текста до сих пор.

А пока вы можете добавить текст как html через foreignObject, так как текст html поддерживает переполнение текста.