SVG中矢量效果属性的特征检测？答案

【问题标题】：Feature detection for the vector-effect property in SVG?SVG中矢量效果属性的特征检测？
【发布时间】：2015-05-02 09:27:13
【问题描述】：

SVG Tiny 1.2 defines a property 称为 vector-effect。

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

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

此属性似乎在大多数支持 SVG 的浏览器中都有效，但在 IE9 和 IE10 中无效。

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

【问题讨论】：

我相信如果它不存在的话，可以对它进行现代测试。

标签： javascript html svg browser-feature-detection

【解决方案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')

【讨论】：

【解决方案2】：

您无需创建元素。

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

【讨论】：