Динамичное растягивание по высоте любого экрана всех слов, введенных в input

Question

Есть такая вот небольшая программка, которая динамически изменяет слово внутри svg. Надо добиться такого эффекта, чтобы вне зависимости от слова или группы слов, они всегда были растянуты по всей высоте (так как повернуты на 90 градусов) за счет изменения размера шрифта (не изменения расстояния между буквами).

let text = document.getElementById("text");
let input = document.getElementById("input");

function changeWord() {
    text.innerHTML = input.value;
}

* {
  padding: 0;
  margin: 0;
}

svg {
  height: 100vh;
  font-family: roboto, sans-serif;
}

input {
  position: fixed;
  top: 0;
  right: 0;
  border: 2px solid red;
}

<svg viewBox="0 0 12 75">
  <text id="text" transform="rotate(90 0 0)">Skibidi</text>
</svg>

<input value="Skibidi" oninput="changeWord()" id="input" type="text">

Answer 1

Ответ с англоязычного stackoverflow (https://stackoverflow.com/questions/62772980/dynamically-stretch-words-to-any-screen-height).

let text = document.getElementById("text");
let input = document.getElementById("input");
let svg = document.querySelector("svg");
function changeWord() {
  text.innerHTML = input.value;
  svg.setAttributeNS(null, "viewBox", `-4 0 16 ${text.getComputedTextLength()}`);
}

* {
  padding: 0;
  margin: 0;
}

svg {
  height: 100vh;
  font-family: roboto, sans-serif;
  font-size:16px;
  border:1px solid;
}

input {
  position: fixed;
  top: 0;
  right: 0;
  border: 2px solid red;
}

<svg viewBox="-4 0 16 75">
  <g transform="rotate(90 0 0)">
  <text id="text">Skibpidi</text>
  </g>
</svg>

<input value="Skibidi" oninput="changeWord()" id="input" type="text">

БЛОГ НА HUSL

Динамичное растягивание по высоте любого экрана всех слов, введенных в input

Ответы (1 шт):