svg 元素 getBoundingClientRect() 数值为 0

本文主要是介绍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

这篇关于svg 元素 getBoundingClientRect() 数值为 0的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---