Как выставить размеры 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}`); ? |
Цитата:
|
Часовой пояс GMT +3, время: 03:55. |