Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.01.2021, 06:44
Аспирант
Отправить личное сообщение для maxim1978 Посмотреть профиль Найти все сообщения от maxim1978
 
Регистрация: 07.05.2019
Сообщений: 38

Как выставить размеры 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

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



Как это делается правильно ?
Ответить с цитированием
  #2 (permalink)  
Старый 22.01.2021, 07:49
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,692

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

Последний раз редактировалось voraa, 22.01.2021 в 10:34.
Ответить с цитированием
  #3 (permalink)  
Старый 22.01.2021, 07:53
Аспирант
Отправить личное сообщение для maxim1978 Посмотреть профиль Найти все сообщения от maxim1978
 
Регистрация: 07.05.2019
Сообщений: 38

вот это жесть - спасибо, шикарно ...
а если добавить path или что то другое - будет работать ?
Ответить с цитированием
  #4 (permalink)  
Старый 22.01.2021, 08:06
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,692

Должно. Пробуйте.
Ответить с цитированием
  #5 (permalink)  
Старый 22.01.2021, 08:07
Аспирант
Отправить личное сообщение для maxim1978 Посмотреть профиль Найти все сообщения от maxim1978
 
Регистрация: 07.05.2019
Сообщений: 38

я карму увеличил - спасибо - огромнейшее
Ответить с цитированием
  #6 (permalink)  
Старый 22.01.2021, 08:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

voraa,
run height=500 если не трудно, добавьте.
Ответить с цитированием
  #7 (permalink)  
Старый 22.01.2021, 09:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

так ли необходимо svg.setAttribute("width", w);
если есть svg.setAttribute("viewBox", `${l} ${t} ${w} ${h}`); ?
Ответить с цитированием
  #8 (permalink)  
Старый 22.01.2021, 10:18
Аспирант
Отправить личное сообщение для maxim1978 Посмотреть профиль Найти все сообщения от maxim1978
 
Регистрация: 07.05.2019
Сообщений: 38

Сообщение от рони Посмотреть сообщение
так ли необходимо svg.setAttribute("width", w);
если есть svg.setAttribute("viewBox", `${l} ${t} ${w} ${h}`); ?
если width не поставить то svg растягивается ... не удобно , хотелось бы что бы атрибут ставился автоматически, в общем я хочу сделать что то на подобии div который растягивается сам
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как отрисовку кривой сделать шириной меньше чем ширина svg? gsdev99 Элементы интерфейса 6 24.03.2020 19:38
Как лучше подключать SVG объект Black_Star (X)HTML/CSS 0 02.12.2016 00:09
Chrome Как запускать сниппет автоматически? MonV4 Javascript под браузер 3 27.10.2016 11:21
Как получить высоту DIV, установленную автоматически YOricH Internet Explorer 4 22.07.2009 17:15
Как узнать размеры изображения в internet explorer dark Общие вопросы Javascript 1 13.04.2009 16:24