Search code examples
javascriptsvgwidth

Why does offsetWidth return undefined as the width of svg?

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>

Why does getBoundingClientRect() return the width of the svg but not offsetWidth?

I can just ignore it and go with getBoundingClientRect(), but I want to know the reason for why this happens.

Solution

  • Because SVGElement doesn't have an offsetWidth property. (MDN lists it [only in the compat table] as "non-standard" and shows basically no browser support for it.) Any time you request a property from an object that the object doesn't have, you get undefined.

    Remember that SVGElement instances are not HTMLElement instances.