获取宽度元素<text / > (SVG) 在添加到 svg 之前使用 js

Question

Good time forum users. Please tell me how to get the size of the element taking into account the font parameters (size, type, style)

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 Unfortunately, it is not very convenient to change the size after adding, because you have to find all the elements and proportionally change the position. (I initially set up the template engine (handlebars.js) where I pass the necessary parameters and it automatically builds an element with dimensions (the problem is only with get length text).

Answer 1

The OP is commenting:

I generate an svg object depending on the data received. The resulting text can be of different lengths and I need to calculate the size of it to properly generate the object in width.

As I've commented: In this case you may begin with whatever size you want for the svg, append the text, get the size of the text, for example using the textLength property, and next you change the size of your svg element

 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

Assuming that the element has been inserted into the web page, you could use something like this:

getComputedStyle(tagText).width

However, if you did not specify that width yourself (using CSS, for instance), in your case, the default value will be auto .

If that's the case, you could try to look at the width of the element's parent, doing something like this:

tagText.parentElement.offsetWidth