Есть некий SVG и внутри него есть не определённое количество элементов, я хочу что бы width и height и так же viewBox высчитывался относительно содержимого то есть другими словами все элементы внутри должны быть видны и для этого я стал высчитывать его количество и размеры вот так ...
let svg = document.getElementById("svg");
let summ1 = 0,
summ2 = 0,
width = [],
height = [];
for (let i = 0; i < svg.children.length; i++) {
let w = svg.children[i].getBoundingClientRect().width;
let h = svg.children[i].getBoundingClientRect().height;
width.push(w);
height.push(h);
}
for (let i = 0; i < width.length; i++) {
summ1 = summ1 + width[i];
}
for (let i = 0; i < height.length; i++) {
summ2 = summ2 + height[i];
}
svg.setAttribute("width", summ1);
svg.setAttribute("height", summ2);
svg.setAttribute("viewBox", `0 0 ${summ1} ${summ2}`);
Но в итоге появляются пустые пространства и ширина и высота на много больше
Возможно я что то не так делаю и не верно вычисляю
Тренировался с SVG с двумя элементами вот здесь :
https://codepen.io/topicstarter/pen/gOwyyQR
Скриншот не верного вычисления
Как это делается правильно ?