获取SVG元素的有效大小-barwe的学习笔记

获取SVG元素的有效大小

阔落煮酒

2021-11-19 / 0 评论 / 1 点赞 / 1916 阅读 / 423 字

12/31

一般来讲，一个 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();

其中：

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

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

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

获取SVG元素的有效大小