Detecting foreignObject function in SVG

Question

I use the foreignObject element in SVG, however IE9 does not support this element. I am looking for a way to detect this feature. Modernizr does not detect this function, and it seems that I cannot use createSVGForeignObject (not available in SVGSVGElement), as it does for a rectangle (createSVGRect).

Thanks!

Answer 1

This should work if you want to use foreignObject because it integrates the html content ...

<switch> <g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" requiredExtensions="http://www.w3.org/1999/xhtml"> <foreignObject > </foreignObject> </g> <text font-size="10" font-family="Verdana"> No foreignObject </text> </switch> 

The required portion of extents was proposed for w3c and that was their answer . Firefox really implements this, but I have not tested anything. You can get away with the attribute of the required attributes, as Eric suggests.

If you want to test javascript try

 var supported = document.implementation.hasFeature("www.http://w3.org/TR/SVG11/feature#Extensibility","1.1"); – 

Answer 2

There is a way to test this feature in JS, the following was borrowed from a recent commit for modernizr ( https://github.com/Modernizr/Modernizr/commit/ee836f083f29a9e634df731400027c24630a75f3 ):

  var toStringFnc = ({}).toString; Modernizr.addTest('svgforeignobject', function() { return !!document.createElementNS && /SVGForeignObject/.test(toStringFnc.call(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'))); });