JavaScript Method getBBox() For Off Screen SVG?-CodePudding

Is it possible to get the bounding box of an SVG path without placing it in the dom?

const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute('width', '391');
svg.setAttribute('height', '391');
svg.setAttribute('viewBox', "-70.5 -70.5 391 391");
svg.innerHTML = `<rect fill="#fff" stroke="#000" x="-70" y="-70" width="390" height="390"/>
<g opacity="0.8">
    <rect x="25" y="25" width="200" height="200" fill="lime" stroke-width="4" stroke="pink" />
    <circle cx="125" cy="125" r="75" fill="orange" />
    <polyline points="50,150 50,200 200,200 200,100" stroke="red" stroke-width="4" fill="none" />
    <line x1="50" y1="50" x2="200" y2="200" stroke="blue" stroke-width="4" />
</g>`;
let box = svg.getBBox();
document.body.innerHTML  = `<p>x:${box.x}, y:${box.y}, width:${box.width}, height:${box.height}</p>`;
document.body.appendChild(svg);
box = svg.getBBox();
document.body.innerHTML  = `<p>x:${box.x}, y:${box.y}, width:${box.width}, height:${box.height}</p>`;

Here you can see that getBBox() returns only zeros before the image is placed. But what if I want to do something else with the image, like feeding it to a WebGL context, but I need the bounding box information? Is the most elegant method really placing the image in the dom, get the information, and then removing it?

CodePudding user response：

You need to append your svg element to the DOM to get the boundingBox.

If you only need to get the bounding Box data, you could easily make your svg invisible via css:

.svg-hidden{
  visibility:hidden;
  position:absolute;
  left:-1px;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

Note: display:none won't work – therefore we use visibility:hidden an an absolute position to prevent layout shifts.

In the end, you can completely remove your svg.

document.querySelector('.svg-hidden').remove();

const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute('class', 'svg-hidden');
svg.setAttribute('aria-hidden', 'true');
svg.setAttribute('width', '391');
svg.setAttribute('height', '391');
svg.setAttribute('viewBox', "-70.5 -70.5 391 391");
svg.innerHTML = `<rect fill="#fff" stroke="#000" x="-70" y="-70" width="390" height="390"/>
<g opacity="0.8">
    <rect x="25" y="25" width="200" height="200" fill="lime" stroke-width="4" stroke="pink" />
    <circle cx="125" cy="125" r="75" fill="orange" />
    <polyline points="50,150 50,200 200,200 200,100" stroke="red" stroke-width="4" fill="none" />
    <line x1="50" y1="50" x2="200" y2="200" stroke="blue" stroke-width="4" />
</g>`;
document.body.appendChild(svg);
let box = svg.getBBox();
document.body.innerHTML  = `<p>x:${box.x}, y:${box.y}, width:${box.width}, height:${box.height}</p>`;
// remove svg;
document.querySelector('.svg-hidden').remove();

.svg-hidden{
  visibility:hidden;
  position:absolute;
  left:-1px;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}