circle.getTotalLength() Internet Explorer 错误

Question

我正在尝试使用方法 .getTotalLength() 来获取 svg 圆的总长度。

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

    const totalLength = circle.getTotalLength();

在 Edge 中我得到错误：

ReferenceError: 'getTotalLength' is not defined

为了增加洞察力，元素是 svg <circle> 而不是路径。

如果 Edge/Internet Explorer 支持，我如何在 js 中检测到 and/or 为其提供 polyfill？

Answer 1

虽然你可能不会用到getTotalLength的方法，但是你得到的是一个圆，你可以用圆的周长公式2*Math.PI*r 其中 r 是圆的半径。有一点不同，但我认为这不重要。

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>

circle.getTotalLength() Internet Explorer 错误

circle.getTotalLength() Internet explorer error

javascript

svg

polyfills

ecmascript-6

microsoft-edge