Я использую SVG, чтобы отобразить шаблон с выбитым текстом, чтобы создать прямоугольник с текстом внутри (который идет через маску). Я хочу, чтобы текст маски соответствовал заданному размеру и масштабировался должным образом, чтобы ответственный текст автоматически использовал ширину и высоту, которые он имеет для использования.
Для более длинных абзацев это прекрасно, но когда текстовое содержимое не очень длинное, логика c масштабирует текст до максимальной ширины / высоты, пока не достигнет границы. Смотрите скриншот. Но я вижу, что есть отступы, от которых я хочу избавиться - как я могу сделать так, чтобы текст полностью соответствовал контейнеру?
Чтобы сделать его лучше видимым, я добавил текстовый элемент непосредственно в SVG, чтобы я мог показать размеры элемента. Как я могу избавиться от этого пробела?
Пример с фиолетовыми прямоугольниками, которые показывают пробелы в текстовом элементе
Это пример с более длинным текстом, который работает, как и ожидалось:
<svg id="canvas-6" width="300px" height="75px" viewBox="0 0 300 75" xmlns="http://www.w3.org/2000/svg">
<text transform="translate(0,0)" class="knockout-text-value" id="fit-hidden-6" fill="#000" x="50%" y="50%" width="100%" text-anchor="middle" dominant-baseline="central" font-family="'Lato', sans-serif" font-size="60.785146891139px">TEST TEST</text>
<rect id="fit-text-6" class="knockout-text-bg" width="100%" height="100%" fill="red" x="0" y="0" fill-opacity="1" stroke="black" stroke-opacity="1" stroke-width="1" stroke-linecap="round" stroke-dasharray="5,5" mask="url(#knockout-text-6)"></rect>
<mask id="knockout-text-6">
<rect width="300px" height="100%" fill="#fff" stroke="#000" stroke-opacity="1" stroke-width="1" stroke-linecap="round" stroke-dasharray="5,5" x="0" y="0"></rect>
<text transform="translate(0,0)" class="knockout-text-value" id="fit-mask-6" fill="#000" x="50%" y="50%" text-anchor="middle" dominant-baseline="central" font-family="'Lato', sans-serif" font-size="60.785146891139px">TEST TEST</text>
</mask>
</svg>
Это пример, в котором пустое пространство все еще находится внутри холста SVG:
<svg id="canvas-5" width="300px" height="134px" viewBox="0 0 300 134" xmlns="http://www.w3.org/2000/svg">
<text transform="translate(0,0)" class="knockout-text-value" id="fit-hidden-5" fill="#000" x="50%" y="50%" width="100%" text-anchor="middle" dominant-baseline="central" font-family="'Lato', sans-serif" font-size="109.0909090909091px">TEST</text>
<rect id="fit-text-5" class="knockout-text-bg" width="100%" height="100%" fill="red" x="0" y="0" fill-opacity="1" stroke="black" stroke-opacity="1" stroke-width="1" stroke-linecap="round" stroke-dasharray="5,5" mask="url(#knockout-text-5)"></rect>
<mask id="knockout-text-5">
<rect width="300px" height="100%" fill="#fff" stroke="#000" stroke-opacity="1" stroke-width="1" stroke-linecap="round" stroke-dasharray="5,5" x="0" y="0"></rect>
<text transform="translate(0,0)" class="knockout-text-value" id="fit-mask-5" fill="#000" x="50%" y="50%" text-anchor="middle" dominant-baseline="central" font-family="'Lato', sans-serif" font-size="109.0909090909091px">TEST</text>
</mask>
</svg>