为什么 offsetWidth return 未定义为 svg 的宽度？

Question

let svg = document.querySelector("svg");
console.log(svg.getBoundingClientRect().width);
console.log(svg.offsetWidth);

<svg viewBox="0 0 700 300">
  <path d="M0 300c150 0 50-300 200-300l300 0c150 0 50 300 200 300 h-700" />
</svg>

为什么 getBoundingClientRect() return 是 svg 的宽度而不是 offsetWidth？

我可以忽略它并使用 getBoundingClientRect()，但我想知道为什么会这样。

Answer 1

因为 SVGElement 没有 offsetWidth 属性。（MDN 将它 [仅在兼容 table] 中列为“非标准”，并且基本上没有浏览器支持它。）任何时候你从一个对象请求一个属性而该对象不有，你得到 undefined.

请记住 SVGElement 个实例不是 HTMLElement 个实例。

Why does offsetWidth return undefined as the width of svg?