SVG Масштабирование текста под контейнер - PullRequest
Новая
       28

SVG Масштабирование текста под контейнер

27 голосов
/ 30 мая 2010

Вероятно, это очень простой вопрос, но как мне заставить текст в SVG растягиваться, чтобы соответствовать его контейнеру?

Мне все равно, выглядит ли он безобразно из-за того, что он растянут слишком долго или высоко, но он должен соответствовать своему контейнеру и быть максимально большим.

Спасибо

Ответы [ 3 ]

21 голосов
/ 15 марта 2013

Если вы действительно не заботитесь о том, что текст становится уродливым, вот как уместить текст неизвестной длины в известную ширину. 

<svg width="436" height="180"
    style="border:solid 6px"
    xmlns="http://www.w3.org/2000/svg">
    <g>
        <text y="50%" textLength="436" lengthAdjust="spacingAndGlyphs">UGLY TEXT</text>
    </g>
</svg>

enter image description here

12 голосов
/ 30 декабря 2013

Вот то, что я придумал ... Это похоже на то, что опубликовали другие люди, но я думаю, что оно изменяет размеры и масштабируется красиво. Этот код будет добавлять интервал к любому тексту примерно между 10-25 символами, чтобы он занимал всю ширину своего родителя. Если вам нужен более длинный или короткий текст, просто отрегулируйте ширину viewBox и атрибуты textLength. 

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox='0 0 300 24'>
<text textLength='290' lengthAdjust="spacing" x='5' y="14" >
    Some Unknown Text that is resizing
</text>
</svg>
9 голосов
/ 24 марта 2013

Может быть, это может сработать для вас. Вы должны настроить значения, но они изменяют размер при изменении размера родительского элемента div. Вот мой пример. Он работает аналогично fittext.js

Я использовал атрибуты ‘viewBox’ & ‘preserveAspectRatio’ . 

<svg><text x="50%" y="50%" dy=".3em">Look, I’m centered!</text></svg>
<svg viewBox="-50 -50 100 100" preserveAspectRatio="xMidYMid meet"><text font-size="16" dy=".3em" >I’m also resizeable!</text></svg>

другие ресурсы, на которые я смотрел:

...