获取SVG元素的有效大小

一般来讲，一个 svg 元素的结构是这样的：

<svg xmlns="http://www.w3.org/2000/svg" width="1400" height="1000" style="font-family: Arial">
    <g></g>
    <defs></defs>
</svg>

第一个 g 标签的尺寸就是该 svg 画板中实际内容占据的大小。

这个 g 标签的尺寸可以通过 getBBox() 方法获取：

const svg = document.getElementByTag("svg")[0];
const {x, y, width, height} = svg.getBBox();

其中：

• x 是g元素相对于画板左上角在水平方向的偏移
• y 是g元素相对于画板左上角在竖直方向的偏移
• width 是浏览器渲染后g元素的实际宽度
• height 是浏览器渲染后g元素的实际高度

所以svg元素的有效内容尺寸为 width x height，考虑到内容偏移并重置svg元素的大小：

svg.setAttribute("width", `${width + x}px`);
svg.setAttribute("height", `${height + y}px`);

getBBox() 方法还可以测量svg元素中的文本尺寸。