Как я могу ограничить или клип текст в 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-таблицу?

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

<!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

Ответы

Ответ 1

Вы можете использовать клип-путь для клипа в любую форму, которую вы хотите, например, masking-path-01 из svg testsuite.

Соответствующие части, определяющие путь клипа:

<clipPath id="clip1">
  <rect x="200" y="10" width="60" height="100"/>
  ... you can have any shapes you want here ...
</clipPath>

а затем примените путь клипа следующим образом:

<g clip-path="url(#clip1)">
  ... your text elements here ...
</g>

Ответ 2

Как Марчин сказал в пункте (2) своего ответа (к сожалению, ниспровергнутый, но на самом деле это хорошая точка), альтернативный способ добиться эффекта состоит в том, чтобы перекрасить часть, не требуемую с помощью белого прямоугольника.

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

<!-- Overpaint the overflowing text -->
<rect x="155" y="85" width="100" height="100" fill="white" />

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

<text x="160" y="100">12</text>
<text x="160" y="115">7</text>
<text x="160" y="130">9</text>
<text x="160" y="145">2</text>

</svg>
</body>
</html>

svg overlay sample

Ссылка на спецификацию SVG: SVG 2.0 Rendering Order

Ответ 3

Если по какой-то причине вы не хотите использовать обрезку, вы также можете использовать вложенный тег SVG:

<svg>
  <svg x="10" y"10" width"10" height="10">
    <text x="0" y="0">Your text</text>
  </svg>
</svg>

Таким образом, ваш текст будет отключен, если он находится вне вложенного окна SVG. Обратите внимание, что теги x и y тега text относятся к системе координат вложенного SVG и соответствуют 10 в системе координат внешнего SVG.

Ответ 4

(1) Нет причин использовать SVG для таблиц. Используйте таблицы HTML.

(2) Под "отсечением" я понимаю, что вы имеете в виду, что лишний текст будет скрыт. SVG использует "модель художника", в которой элементы, указанные ниже в документе, вычерчены над элементами, указанными ранее. Это позволит вам обрезать области.

(3) Если вам действительно нужно сделать это в документе SVG, вы можете использовать посторонний объект и вставлять HTML.

Ответ 5

Если вы не хотите использовать clip-path, что может быть больно, если каждый элемент имеет другой размер, вы также можете использовать вложенные элементы <svg> для отсечения. Просто убедитесь, что элементы svg имеют стиль CSS overflow:hidden.

<!DOCTYPE html>
<html>
<body>
<svg>
    <svg width="57" height="15" x="10" y="5"><text y="15">Orange</text></svg>       
    <svg width="57" height="15" x="10" y="20"><text y="15">Pear</text></svg>
    <svg width="57" height="15" x="10" y="35"><text y="15">Banana</text></svg>   
    <svg width="57" height="15" x="10" y="50"><text y="15">Pomegranate</text></svg>

    <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)"/>
</svg>
</body>
</html>