Как получить размеры SVG посредством JavaScript?

Question

Пытаюсь получить ширину SVG.

svg.getBBox().width() --> 40. Нашел ширину круга без учета stroke.
svg.width --> Сложный объект, в котором нахожу свойство animVal и baseVal, содержащих свойство value: 300
svg.width.animVal.value --> 300. Получаю искомое, правда иногда и 0.

Есть ли способ получить размер SVG эффективнее и надёжнее в плане результата?

Потому как, далее имею следующее: меняю через стили размеры SVG, а svg.width.animVal.value "не успевает" обновиться. Иногда успевает. После вызова кода с небольшой задержкой (10ms) все нормально.

let svg = document.getElementById('_svg');

console.log(`BBox.width: ${svg.getBBox().width}`);
console.log(`SVG.width: ${svg.width}`); // Получаю сложный объект
printWidth();

svg.style.width = '600px';
svg.style.height = '200px';

printWidth();

setTimeout(printWidth, 10);

function printWidth(){
    console.log(`SVG.width.animVal.value: ${svg.width.animVal.value}`);
    console.log(`SVG.width.baseVal.value: ${svg.width.baseVal.value}`);
}

<svg fill="yellow" stroke="black" id="_svg">
    <circle cx="25" cy="25" r="20"/> 
</svg>

Answer 1

var el   = document.getElementById("yourElement"); // or other selector like querySelector()
var rect = el.getBoundingClientRect(); // get the bounding rectangle

console.log( rect.width );
console.log( rect.height);

Ссылка на первоисточник

Answer 2

svg.getBBox().width() --> 40 ??? Нашел ширину круга без учета stroke???

Да.

svg.width.animVal.value --> 300 !!!! Получаю искомое, правда иногда и 0???

animVal - во время анимации - содержит текущее значение атрибута. Вероятно, ваш код в такие моменты выполнялся раньше, чем успевал отобразиться круг.

Есть ли способ получить размер SVG эффективнее и надёжнее в плане результата?

Можно использовать getBoundingClientRect():

console.log(`Width: ${svg.getBoundingClientRect().width}`);
console.log(`Height: ${svg.getBoundingClientRect().height}`);

Answer 3

Вариант №1: использовать getBBox(). Он сообщает ширину и высоту, смещение x и y в пикселях без учёта масштабирования элемента – то есть getBBox() получает начальные размеры:

const el = document.getElementById('_svg')
console.log(el.getBBox().width)
console.log(el.getBBox().height)

<svg fill="yellow" stroke="black" viebox="0 0 600 200" id="_svg">
  <circle cx="25" cy="25" r="20"/> 
</svg>

Вариант №2: использовать getBoundingClientRect() – он учитывает преобразования, выполненные с помощью масштаба и т.д:

const el = document.getElementById('_svg')
console.log(el.getBoundingClientRect().width)
console.log(el.getBoundingClientRect().height)

<svg fill="yellow" stroke="black" viebox="0 0 600 200" id="_svg">
  <circle cx="25" cy="25" r="20"/> 
</svg>

БЛОГ НА HUSL

Как получить размеры SVG посредством JavaScript?

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