Feature detection for the vector-effect property in SVG?

Question

SVG Tiny 1.2 defines a property called vector-effect.

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

With the above path, the stroke width will always be 2 pixels, even if the element gets scaled (due to a transform on a parent g element, for example).

This property seems to work in most of the SVG-supporting browsers, but not in IE9 and IE10.

Is there any way to feature-detect this property?

Answer 1

This works for me on Firefox and 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>

Alternatively you could try Modernizr. Something like this I suppose.

Modernizr.testProp('vectorEffect')

Answer 2

You need not to create an element.

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