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

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

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();}

Answer 2

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

或许可以试试这个

Answer 3

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