Как растянуть текст SVG по вертикали
У меня есть текст svg, который мне нужно растянуть как по горизонтали, так и по вертикали. Я смог растянуть слово по горизонтали с помощью свойства text-length, но не смог найти способ растянуть его по вертикали.
<svg width = "300px" ... >
<text textLength = "300px" lengthAdjust = "spacingAndGlyphs" > HELLO </text>
</svg>
Я хочу растянуть этот текст по вертикали, чтобы заполнить серую область. Это выполнимо? Если да, то какой путь?
Я создал для этого плункер -> плунжер
Да, я добавил свойство высоты для элемента text, но это ничего не дало.
Пожалуйста, покажите весь свой код и / или создайте список своей проблемы
Я добавил плункр
Что именно различается в вашей настройке? Только ширина контейнера? В этом случае просто установите свой viewBox правильно и установите для preserveAspectRatio значение none: plnkr.co/edit/bbEgId7zJhFkeMkHKU1w?p=preview Но если текст будет отличаться, тогда будет сложнее.
настройка окна просмотра работала правильно!
Ответы 1
Вы можете использовать команду преобразования scale (x, y) для масштабирования элемента. Шкала 1 соответствует нормальному размеру, 0,5 - половине нормального размера, а 2 - двойному нормальному размеру.
<text transform = "scale(1, 2)" textLength = "300px" lengthAdjust = "spacingAndGlyphs" > HELLO </text>
Дело в том, что высота может быть разной. Так что я не могу это жестко запрограммировать. Могу ли я решить, что это зависит от высоты?
Вы пробовали указать
height?