circle.getTotalLength() Internet explorer error

Question

I'm trying to use the method .getTotalLength() to get the total length of an svg circle.

    const circle = document.querySelector('.circle');

    const totalLength = circle.getTotalLength();

In Edge I get the error:

ReferenceError: 'getTotalLength' is not defined

For added insight the element is an svg <circle> not a path.

How can I detect in js if this is supported in Edge/ Internet explorer and/or provide a polyfill for it?

Answer 1

Although you may not use the getTotalLength method, since what you have is a circle, you can use the formula for the circle's perimeter 2*Math.PI*r where r is the circle's radius. There is a small difference but I don't think it matters.

console.log("getTotalLength",theCircle.getTotalLength());
let r = Number(theCircle.getAttribute("r")); //circle's radius
console.log("2*Math.PI*r",2*Math.PI*r)

svg{border:1px solid}

<svg>
  <circle id="theCircle" cx="150" cy="75" r="70" />
</svg>