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

Question

是否可以获取 SVG 路径的边界框而不将其放入 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>`;

在这里您可以看到getBBox()在放置图像之前仅返回零。但是，如果我想对图像执行其他操作（例如将其提供给 WebGL 上下文），但我需要边界框信息，该怎么办？最优雅的方法真的是将图像放入dom中，获取信息，然后将其删除吗？

Answer 1

您需要将 svg 元素附加到 DOM 才能获取边界框。

\n

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

\n

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

\n

注意：display:none\xe2\x80\x93 不起作用，因此我们使用visibility:hidden绝对位置来防止布局移位。

\n

最后，你可以完全删除你的svg。

\n

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

\n

\r\n

\r\n

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

\r\n

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

\r\n

\r\n

\r\n

\n