javascript - 检测何时支持带有SVG路径字符串的Path2D

Microsoft Edge似乎部分支持Path2D API-它不支持使用SVG路径字符串，即

const path = new Path2D('M20 L30');

有没有一种方法可以检测是否支持在SVG路径中传递？

最佳答案

在这种情况下，不会引发任何可捕获的错误，并且在支持的浏览器中也不传递无效的字符串。 （这听起来像是规格流向我...）

因此，为了能够检测到构造器受支持的确切情况，但忽略了该参数，我们必须实际检查是否绘制了某些内容...

您可以通过描画一个简单的M0,0H1 Path2D来实现，然后检查上下文坐标0,0处的像素是否已绘制。

function supports() {
  // no simple support
  if (typeof Path2D !== 'function') return false;
  // create a new context
  var x = document.createElement('canvas')
    .getContext('2d');
  // stroke a simple path
  x.stroke(new Path2D('M0,0H1'));
  // check it did paint something
  return !!x.getImageData(0, 0, 1, 1).data[3];
};

console.log(supports());

但是请注意，Edge似乎都不支持Path2D.addPath()方法，因此，如果您包含像Google的canvas-5-polyfill这样的polyfill，其中确实包含Path2D polyfill，则整个Path2D都将使用polyfilled版本（因为它们还会检查addPath支持）。