Как узнать настоящие размеры text тега при помощи Javascript?

Question

[Ярослав Алексеенко]

Приветствую, друзья!

Спасибо, что обратили внимание на мой пост.
Есть такая конструкция:

<div style="width:530px; height:630px;">
<svg width="530" height="630" viewBox="0 0 530 630">
<g id="obj"><text font-family="'Open Sans'" font-size="25px" fill="rgb(0, 0, 0)">123123123</text></g>
</svg>
<div id="bRect"></div>
</div>

Тут видно, что в блоке 530х630 находится svg с таким же размером, также в блоке есть вложенный блок #bRect.
Моя задача: #bRect должен описывать контур #obj, а над #obj будут проводится манипуляции (перемещение, вращение, масштаб). Для этого нужно знать размер объекта и его смещение, а getBBox() и getBoundingClientRect() не возвращают правильный размер для text-объекта. Для манипуляции над объектами использую GSAP.

Вопросы:
1. Как узнать размер текста text или группы g#bRect, если использован шрифт Google Fonts.
2. Кто и что делает со смещением [x;y], которое возвращает getBBox(), чтобы поставить точно объекты #bRect и #obj.

Спасибо за помощь.

Answer 1

[Serdji]

Я если я не ошибся в синтаксисе, то на первый вопрос можно сделать так

let g = document.querySelector('#obj');
let tagText = g.firstElementChild;
let tagTextWidth = tagText.offsetWidth; // Размеры
let tagTextHeight = tagText.offsetHeight; // блока

Comments

[Serdji]

let это из ES6 новое объявление переменной, если будет ругаться напишите var вместо let

[Ярослав Алексеенко]

Спасибо, но возвращает не верный размер... tagText.offsetWidth равно 112, а в моем случае 128...

[Ярослав Алексеенко]

Так как я использую не стандартный шрифт, а Google Font, к сожалению, его размер вычисляется неверно! Вот так :) А если использовать стандартный шрифт, все верно...