用于离屏 SVG 的 JavaScript 方法 getBBox()？答案

【问题标题】：JavaScript Method getBBox() For Off Screen SVG?用于离屏 SVG 的 JavaScript 方法 getBBox()？
【发布时间】：2021-12-16 09:26:55
【问题描述】：

是否可以在不将其放置在 dom 中的情况下获取 SVG 路径的边界框？

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>`;

在这里您可以看到getBBox() 在放置图像之前仅返回零。但是如果我想对图像做其他事情，比如将它提供给 WebGL 上下文，但我需要边界框信息，该怎么办？最优雅的方法真的是把图片放到dom中，获取信息，然后再移除吗？

【问题讨论】：

标签： javascript svg

【解决方案1】：

您需要将 svg 元素附加到 DOM 以获取 boundingBox。

如果您只需要获取边界框数据，您可以通过 css 轻松使您的 svg 不可见：

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

注意：display:none 不起作用 - 因此我们使用 visibility:hidden 一个绝对位置来防止布局移位。

最后，您可以完全删除您的 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;
}

【讨论】：