如何检测浏览器是否支持下列特定的特性?

Question

<circle
  v-for="(circle, index) in circles"
  :key="index"
  cx="0"
  cy="0"
  :r="radius"
  :style="`fill: ${circle.color}`"
>
  <animateMotion
    begin="0;start.click"
    dur="4s"
    repeatCount="1"
    fill="freeze"
    keyTimes="0;1"
    :keyPoints="`0;${circle.keyPoint}`"
  >
    <mpath xlink:href="#name-path-middle" />
  </animateMotion>
</circle>

上面的 svg 代码中,其中 keyPoints 用来控制圆点在路径上的位置。但是发现 keyPoints 是存在兼容性问题的,如果遇到不支持的浏览器,那么就需要回退到不使用动画的效果。其中 animateMotion 元素对应 SVGAnimateMotionElement 的接口,但是不管支不支持,SVGAnimateMotionElement.keyPoints 都是 undefined。遇到这种情况,应该如何比较好的检测浏览器是否支持 keyPoints 属性。

Answer 1

可以到这个网站上去查 https://caniuse.com

Answer 2

https://developer.mozilla.org/zh-CN/docs/Web/API/DOMTokenList...

或许可以试试这个

Answer 3

SVGAnimateMotionElement的原型对象和自身属性都没有keyPoints，自然就是undefined了，好像没有什么能直接通过JS来检测浏览器是否支持这个属性的方法，但是我根据楼上的思路觉得是不是可以曲线救国，canIUse显示了基本上现代浏览器都支持这个属性-除了万恶的IE，那你只要检测当前浏览器是不是IE类型的就行了呀，这个是有现成的代码的：

function isIE() {
    if (!!window.ActiveXObject || "ActiveXObject" in window) {
        return true;
    }
    else {
        return false;
    }
}

再结合一下SVGAnimateMotionElement的判断：

function isSVGAnimateMotionSupported() {
  return typeof SVGAnimateMotionElement !== 'undefined';
}

function isKeyPointsSupported(){
    return !isIE() && isSVGAnimateMotionSupported();
}