Текст масштабирования SVG для соответствия контейнеру

Это, вероятно, очень простой вопрос, но как я могу получить текст в SVG для растягивания, чтобы соответствовать его контейнеру?

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

Спасибо

Ответ 1

атрибут viewbox - это то, что вам нужно.

Ответ 2

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

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

Ответ 3

Возможно, это может сработать для вас. Вам нужно будет настроить значения, но при изменении родительского div он изменит размер. Вот мой пример dabblet. Он работает аналогично 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>

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

Ответ 4

Вот что я придумал... Его похоже на то, что другие люди разместили, но я думаю, что он изменяет размеры и масштабирует красиво. Этот код добавит расстояние до любого текста примерно от 10 до 25 символов, чтобы заполнить всю его ширину. Если вам нужен более длинный или короткий текст, просто измените атрибуты width и 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>