Feature detection of foreignObject in SVG

问题

I am using the foreignObject element in SVG, however IE9 does not support this element. I am looking at a way the detect this feature. Modernizr does not detect this feature and it seems I can not use createSVGForeignObject (not available on SVGSVGElement) like they do for rectangle (createSVGRect).

Thanks!

回答1:

This should work if you want to use foreignObject because it integrates 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 requiredExtensions part proposed to w3c and this was their response. Firefox does implement this, but I havent tested anything else though. You may be able to get away with just the requiredFeatures attribute as Erik suggests.

If you want to test in javascript try

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

回答2:

There is a way to test this feature in JS, the following was borrowed from a recent commit to 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')));
        });

来源：https://stackoverflow.com/questions/11128939/feature-detection-of-foreignobject-in-svg

标签

svg

feature-detection