Как я могу сделать текст автоматически уменьшаться в SVG? - PullRequest
Новая
       21

Как я могу сделать текст автоматически уменьшаться в SVG?

1 голос
/ 28 марта 2011

У меня есть элемент SVG, который я создал с помощью Inkscape.Затем я беру этот SVG и вставляю его как часть таблицы стилей XSL-FO, которая используется для преобразования данных XML, а затем передается через средство визуализации IBEX для создания PDF-файла (который обычно затем печатается).Например, у меня есть элементы в svg / stylesheet, которые выглядят так (дополнительный шум из-за экспорта Inkscape): 

<text x="114" x="278.36218" id="id1" xml:space="preserve" style="big-long-style-string-from-inkscape">
    <tspan x="114" y="278.36218" id="id2" style="style-string">
        <xsl:value-of select="Alias1"/>
    </tspan>
</text>

Моя проблема заключается в том, что я не знаю, насколько большой этотекстовая область будет.Для этого конкретного, у меня есть изображение справа от текста в SVG.Однако, если эта строка является максимально допустимым числом символов W, она слишком длинная и идет по изображению.Что бы я хотел (в идеальном мире) - это указать, сколько пикселей в ширину я хочу, чтобы текстовый блок был, и затем автоматически уменьшать текст до тех пор, пока он не поместится в этой области.Если я не могу сделать это, усечение текста также будет работать.В качестве последней возможности я буду использовать шрифт фиксированной ширины и сам усекаю строки в генерации XML, хотя это создает что-то менее удобное и менее красивое.

Я обошел вокругSVG документация и немного изучил flowRegions, а также пути, но ни один из них, кажется, не совсем то, что я хочу (возможно, они есть).Если это помогает, вот строка стиля, которую генерирует Inkscape: 

"font-size:20px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans"

Заранее спасибо за помощь.

1 Ответ

1 голос
/ 28 марта 2011

У вас есть текст произвольной длины строки (в пересчете на символы), и вы хотите масштабировать его так, чтобы он помещался в фиксированное количество места?Единственный способ, которым я могу придумать, чтобы изменить масштаб текста до фиксированного размера, это поместить его в элемент svg и затем масштабировать SVG до этого размера: 

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Resizing Text</title>
  <defs>
    <svg id="text-1" viewBox="0 0 350 20">
      <text id="text-2" x="0" y="0" fill="#000" alignment-baseline="before-edge">It's the end of the world as we know it, and I feel fine!</text>
    </svg>
  </defs>
  <rect x="500" y="100" width="200" height="40" fill="#eee" />
  <use  x="510" y="110" width="180" height="20" xlink:href="#text-1" />
</svg>

Однако, как видно выше, viewBox на инкапсулирующем элементе svg необходимо задать ширину текста, которую вы, вероятно, не знаете.

Если вы ссылаетесь на этот SVG внутри пользовательского агента с доступными сценариями (например,веб-браузер), тогда вы можете легко написать скрипт для захвата ширины text или tspan элемента и соответственно установить viewBox.

...