Javascript-форум - Как выставить размеры SVG автоматически?

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Как выставить размеры SVG автоматически? (https://javascript.ru/forum/dom-window/81743-kak-vystavit-razmery-svg-avtomaticheski.html)

Как выставить размеры SVG автоматически?

Есть некий 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

Скриншот не верного вычисления

Как это делается правильно ?

Надо считать не ширину и высоту, а минимальные и максимальные координаты элементов.
По ним рассчитать необходимую ширину, высоту и смещение viewBox
Ну и учесть, что сам svg может располагаться в произвольном месте на странице

<head>
<style>
  svg {
    border: 3px solid black;
    margin: 40px;
  }
</style>
</head>

<body>
  <svg id="svg">
    <rect width="200" height="300" x="40" y="50" fill="red" />
    <circle cx="160" cy="400" r="130" fill="blue" />
    <rect width="200" height="100" x="250" y="90" fill="green" />
  </svg>
 <script>
 let svg = document.getElementById("svg");
let t = 1000000, l = 1000000, b = -1000000, r = -1000000;

// Вычисляем минимальные и максимальные координаты 

for (let i = 0; i < svg.children.length; i++) {
	let rec = svg.children[i].getBoundingClientRect();
	t = Math.min(t, rec.top);
	l = Math.min(l, rec.left);
	b = Math.max(b, rec.bottom);
	r = Math.max(r, rec.right);
}
let w = r - l;
let h = b - t;

// Вычисляем смещение в viewBox, учитывая смещение svg и его границу

let recs = svg.getBoundingClientRect();
t -= recs.top + svg.clientTop;
l -= recs.left + svg.clientLeft;

svg.setAttribute("width", w);
svg.setAttribute("viewBox", `${l} ${t} ${w} ${h}`);

 </script>

вот это жесть - спасибо, шикарно ...
а если добавить path или что то другое - будет работать ?

Должно. Пробуйте.

я карму увеличил - спасибо - огромнейшее

voraa,
run height=500 если не трудно, добавьте.

так ли необходимо svg.setAttribute("width", w);
если есть svg.setAttribute("viewBox", `${l} ${t} ${w} ${h}`); ?

Цитата:

Сообщение от рони (Сообщение 533043)

так ли необходимо svg.setAttribute("width", w);
если есть svg.setAttribute("viewBox", `${l} ${t} ${w} ${h}`); ?

если width не поставить то svg растягивается ... не удобно , хотелось бы что бы атрибут ставился автоматически, в общем я хочу сделать что то на подобии div который растягивается сам