Вписать текст в svg без использования js
Необходимо, чтоб текст максимально заполнил svg как при bacground-size: contain. Размер родителя svg может динамически изменяться. Текст всегда однострочный. Сейчас используется такое решение с помощью js, но желательно сделать средствами самого svg.
const $svg = document.querySelector(`svg`);
const $text = $svg.querySelector('text');
const $input = document.querySelector('input');
$input.addEventListener('input', e => {
$text.textContent = e.target.value;
const box = $text.getBBox();
$svg.setAttribute('viewBox', `${box.x} ${box.y} ${box.width} ${box.height}`);
});
$input.dispatchEvent(new Event('input'))svg {
border: 1px solid red;
height: 10em;
width: 100%;
}<svg preserveAspectRatio="xMaxYMid meet">
<text alignment-baseline="baseline" dominant-baseline="middle" text-anchor="middle" fill="black"></text>
</svg>
<input type='text' value='Случайный текст'>