javascript - SVG中矢量效果属性的特征检测？

Question

SVG Tiny 1.2定义了一个名为vector-effect.

<path vector-effect="non-scaling-stroke" stroke-width="2"></path>

使用上面的路径，即使元素被缩放（例如，由于transform父g元素上的 a ），笔触宽度将始终为 2 像素。

此属性似乎适用于大多数支持 SVG 的浏览器，但不适用于 IE9 和 IE10。

有没有办法对这个属性进行特征检测？

Answer 1

这适用于 Firefox 和 IE 9。

  <script>
    var elm = document.createElementNS("http://www.w3.org/2000/svg", "g");
    if (elm.style.vectorEffect != undefined) {
      alert("Supported");
    } else {
      alert("Not Supported");
    }
  </script>

或者，您可以尝试Modernizr。我想是这样的。

Modernizr.testProp('vectorEffect')

Answer 2

您无需创建元素。

if (document.documentElement.style.vectorEffect === undefined) {
  alert("Not Supported");
} else {
  alert("Supported");
}