получить элемент ширины(SVG) использование js перед добавлением в svg

Question

Доброго времени суток форумчанам.Подскажите пожалуйста, как получить размер элемента с учетом параметров шрифта (размер, тип, стиль)

let tagText = document.createElementNS("http://www.w3.org/2000/svg", "text");
    tagText.setAttributeNS(null, "font-size", 18);
    tagText.setAttributeNS(null, "font-weight", 400);
    tagText.setAttributeNS(null, "font-family", "Roboto");
    tagText.innerHTML = 'Some text ...';
    // where ViewPort ??    

let widthTitle = tagText.getBBox().width;
console.log('width title: ', widthTitle); // return 0;

updated К сожалению, не очень удобно менятьРазмер после добавления, потому что вы должны найти все элементы и пропорционально изменить положение.(Первоначально я настроил шаблонизатор (handlebars.js), где я передаю необходимые параметры, и он автоматически создает элемент с размерами (проблема заключается только в получении длины текста).

Answer 1

ОП комментирует:

Я генерирую объект SVG в зависимости от полученных данных. Результирующий текст может иметь разную длину, и мне нужно рассчитать его размер, чтобы правильно сгенерировать объект по ширине.

Как я уже прокомментировал: в этом случае вы можете начать с любого размера, который вы хотите для svg, добавить текст, получить размер текста, например, используя свойство textLength, и затем вы измените размер вашего элемента SVG

let tagText = document.createElementNS("http://www.w3.org/2000/svg", "text");
    tagText.setAttributeNS(null, "y", 20);
    tagText.textContent = 'Some text ...';
svg.appendChild(tagText) 

let widthTitle = tagText.textLength.baseVal.value;

svg.setAttributeNS(null,"viewBox",`0 0 ${widthTitle} 25`)

text{font-size:18px;
  font-weight:400;
  font-family:Roboto
}
svg{border:1px solid; width:200px;}

<svg id="svg"></svg>

Answer 2

Предполагая, что элемент был вставлен в веб-страницу, вы можете использовать что-то вроде этого:

getComputedStyle(tagText).width

Однако, если вы сами не указали эту ширину (например, с помощью CSS), в вашем случае значением по умолчанию будет auto.

Если это так, вы можете попытаться посмотреть на ширину родительского элемента, сделав что-то вроде этого:

tagText.parentElement.offsetWidth