Форум

maxim1978 · #1 (**permalink**) 22.01.2021, 06:44

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

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

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

voraa · #2 (**permalink**) 22.01.2021, 07:49

Надо считать не ширину и высоту, а минимальные и максимальные координаты элементов.
По ним рассчитать необходимую ширину, высоту и смещение 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>

maxim1978 · #3 (**permalink**) 22.01.2021, 07:53

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

voraa · #4 (**permalink**) 22.01.2021, 08:06

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

maxim1978 · #5 (**permalink**) 22.01.2021, 08:07

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

рони · #6 (**permalink**) 22.01.2021, 08:24

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

рони · #7 (**permalink**) 22.01.2021, 09:01

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

maxim1978 · #8 (**permalink**) 22.01.2021, 10:18

Сообщение от рони

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

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

Форум

Справочник

Discord чат

Курсы javascript