Вопросы Теги

Как я могу ограничить или вырезать текст в SVG?

Я создал таблицу в SVG и хочу динамически заполнить ее данными. Это означает, что я не знаю, сколько места занимает текст, и хочу вырезать или скрыть перекрывающийся текст. Как я могу сделать это в SVG?

Мой HTML-документ с SVG выглядит так: 

<!DOCTYPE html>
<html>
<body>
<svg>
<text x="100" y="100">Orange</text>     <text x="160" y="100">12</text>
<text x="100" y="115">Pear</text>       <text x="160" y="115">7</text>
<text x="100" y="130">Banana</text>     <text x="160" y="130">9</text>
<text x="100" y="145">Pomegranate</text><text x="160" y="145">2</text>

<line x1="157" y1="85" x2="157" y2="155" style="stroke:rgb(100,100,100)"/>
</svg>
</body>
</html>

И это будет отображаться в:

enter image description here

Можно ли каким-либо образом вырезать текст в моей SVG- "таблице"?

Реализованное решение из ответа Эрика: 

<!DOCTYPE html>
<html>
<body>
<svg>
    <text x="10" y="20" clip-path="url(#clip1)">Orange</text>       
    <text x="10" y="35" clip-path="url(#clip1)">Pear</text>     
    <text x="10" y="50" clip-path="url(#clip1)">Banana</text>       
    <text x="10" y="65" clip-path="url(#clip1)">Pomegranate</text>

    <text x="70" y="20">12</text>
    <text x="70" y="35">7</text>
    <text x="70" y="50">9</text>
    <text x="70" y="65">2</text>

    <line x1="67" y1="5" x2="67" y2="75" style="stroke:rgb(100,100,100)"/>

    <clipPath id="clip1">
        <rect x="5" y="5" width="57" height="90"/>
    </clipPath>
</svg>
</body>
</html>

enter image description here

31
задан Jonas 14 July 2011 в 11:26
поделиться