1

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).

enter image description here

Vad0k
  • 325
  • 3
  • 13
  • why do you need to get this value before appending to the SVG? – enxaneta Mar 29 '19 at 17:09
  • 2
    Possible duplicate of [Calculate width of text before drawing the text](https://stackoverflow.com/questions/29031659/calculate-width-of-text-before-drawing-the-text) – Alexander Mar 29 '19 at 17:11
  • @enxaneta, 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. – Vad0k Mar 29 '19 at 17:21
  • @Alexander, Thank you very much for the solution using d3.js (is there still a possibility of using pure js (es6+)? – Vad0k Mar 29 '19 at 17:24
  • 1
    The idea is to create a dummy text, grab its width and immediately remove it. It's possible by using pure JS. – Alexander Mar 29 '19 at 17:29
  • @Alexander, I agree with you, as a solution, to make an svg shell, add an element to measure and remove. I still saw your link solution using "canvas api" (I may be wrong, can I use the methods of context 2d (canvas api) to get the dimensions on svg (without viewport) to get the true width)) – Vad0k Mar 29 '19 at 17:34
  • 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 – enxaneta Mar 29 '19 at 17:59
  • 1
    I've seen your update. In this case you may create a hidden SVG, append the text to the hidden SVG element, get the size and use it in the main SVG element – enxaneta Mar 29 '19 at 18:20

2 Answers2

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>
enxaneta
  • 31,608
  • 5
  • 29
  • 42
  • In principle, I agree with you and can be noted as a good solution. I'll just generate a temporary svg, copy the "viewPort" attribute from the original svg, measure the length and delete it. (I have updated (corrected the question)) – Vad0k Mar 29 '19 at 18:23
  • Thanks for helping)) – Vad0k Mar 29 '19 at 18:30
0

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

focorner
  • 1,927
  • 1
  • 20
  • 24
  • 1
    *Assuming that the element has been inserted into the web page* -> well no, the OP asks for getting the width of the element *before* it gets added to the SVG – Nino Filiu Mar 29 '19 at 17:12
  • 1
    @NinoFiliu The element can be appended to the page before it (the element) gets updated with new information. That's how I interpreted the question. But maybe what you are saying is what was meant by the OP, in which case I would agree with you. – focorner Mar 29 '19 at 17:18
  • 1
    @NinoFiliu given that isn't possible, isn't an answer that achieves the same result preferable? – Robert Longson Mar 29 '19 at 17:33