svg 元素 getBoundingClientRect() 数值为 0

问题

在页面在刷新时，想要立即获取页面中 svg 元素的宽高，做进一步的计算。发现通过 getBoundingClientRect 获取会有一定几率获取值为 0。

解决方案

监听 svg 元素的 load 事件，在回调中再获取。

svgElem.addEventListener("load", () => {
  console.log("SVG loaded.");
  console.log(JSON.stringify(svgElem.getBoundingClientRect()));
});

引用MCN 的解释：
https://developer.mozilla.org/en-US/docs/Web/API/SVGElement/load_event