Как я могу ограничить или обрезать текст в SVG? - PullRequest
Новая
       1

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

31 голосов
/ 14 июля 2011

Я создал таблицу в 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

Ответы [ 5 ]

35 голосов
/ 14 июля 2011

Вы можете использовать clip-path , чтобы обрезать любую желаемую форму, см., Например, 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>
4 голосов
/ 05 марта 2017

Если по какой-то причине вы не хотите использовать отсечение, вы также можете использовать вложенный тег 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.

2 голосов
/ 18 марта 2016

Если вы не хотите использовать 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>
2 голосов
/ 31 августа 2014

Как сказал Марцин в пункте (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

0 голосов
/ 14 июля 2011

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...