Текст 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 и может выполнить эту задачу?
Решение
Сколько высоты заполняет текст, будет зависеть от того, как был разработан шрифт. В вашем примере «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 за каждый фрагмент текста.
Другие решения
Что касается заполнения, то дх Атрибут управляет расположением текста внутри объекта 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 который переместил текст влево.
Это лучшее решение, которое я мог придумать
<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>
Внизу все еще есть поле, поэтому текст не полностью умещается внутри поля.