Текст SVG с определенной шириной и высотой

Question

Текст SVG с определенной шириной и высотой

Я пытаюсь разместить и растянуть текст в SVG, в этом примере я хотел, чтобы текст имел высоту 4 см, но, похоже, вокруг него есть отступы!

<svg x="0px" y="0px" width="10cm" height="10cm">
<text x="0cm" y="4cm" font-family="'Arial'" font-size="4cm">Random text</text>
</svg>

введите описание изображения здесь

Как убрать отступ и установить текст, чтобы он был ровно 4 см в высоту?
Если это невозможно в SVG, есть ли другой формат векторной графики, который легко генерировать с помощью php и может выполнить эту задачу?

0

php svg vector

Решение

Другие решения

Что касается заполнения, то дх Атрибут управляет расположением текста внутри объекта SVG.

Как это:

<svg x="0px" y="0px" width="10cm" height="5.5cm" style="background: #ace; fill: #579;">

<text dx="-0.3cm" x="0cm" y="4cm" font-family="Arial" font-size="4cm">Hello</text>

</svg>

Обратите внимание, что атрибут dx установлен на -0.3cm который переместил текст влево.

1

Это лучшее решение, которое я мог придумать

<svg width="500px" height="500px" style="background: #EEE">
<text x="0" y="0" style="dominant-baseline: hanging;font-size:500px"textLength="100%" lengthAdjust="spacingAndGlyphs">Hello</text>
</svg>

Внизу все еще есть поле, поэтому текст не полностью умещается внутри поля.

демонстрация

0

Источник

Accepted Answer

Сколько высоты заполняет текст, будет зависеть от того, как был разработан шрифт. В вашем примере «H» не увеличивает полную высоту измерения «em». будут глифы, которые достигают ниже базовой линии (например, ‘y’, ‘g’ и т. д.) и глифы, которые достигают более высокого уровня (например, акценты).

Вы можете компенсировать это, выбрав размер шрифта, превышающий желаемый размер по вертикали. Отношение размера шрифта к отображаемой высоте должно быть постоянным для конкретного шрифта. Поэтому, как только вы определите правильное соотношение, вы можете использовать его для любого текста.

Например, посмотрите на следующий пример

<svg x="0px" y="0px" width="20cm" height="20cm" font-family="Arial">

<!-- text to fit 4cm high rectangle -->
<rect x="0" y="1cm" width="100%" height="4cm" fill="red" fill-opacity="0.2"/>
<text x="0cm" y="5cm" font-family="'Arial'" font-size="4cm">
<tspan font-size="1.4em">Random text</tspan>
</text>

</svg>

Я хочу, чтобы текст заполнял высоту красного прямоугольника. Я начинаю с установки размера шрифта на 4 см, затем использую <tspan> увеличить размер шрифта до 1.4em. Для Arial это отношение высоты столиц к размеру em. Я нашел это только экспериментально.

Теперь я знаю это соотношение и могу использовать его снова для другого размера шрифта:

<svg x="0px" y="0px" width="20cm" height="20cm" font-family="Arial">

<!-- text to fit 3cm high rectangle -->
<rect x="0" y="7cm" width="100%" height="3cm" fill="red" fill-opacity="0.2"/>
<text x="0cm" y="10cm" font-family="'Arial'" font-size="3cm">
<tspan font-size="1.4em">Random text</tspan>
</text>

</svg>

Я изменил размер шрифта на 3 см, но я могу повторно использовать коэффициент 1,4, чтобы он соответствовал новому размеру.

Демо скрипка здесь

К сожалению, этот прием работает только для высоты, которая постоянна для определенного размера шрифта. Нет простого способа заставить фрагмент текста соответствовать определенной ширине. Кроме применения пользовательских transformили возиться с font-size-adjust за каждый фрагмент текста.

2