Question

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

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

是否有一种功能可以检测是否支持在SVG路径中传递？

Answer 1

在这种情况下，不会引发任何 catchable 错误，并且在支持的浏览器中传递无效的字符串也不会引发该错误。 ^{_{（这听起来像是规格流，顺便说一句...）}}

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

您可以通过描画一个简单的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 支持）。

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

1 个答案: