svg - SVGでのforeignObjectの機能検出

Question

SVGでforeignObject要素を使用していますが、IE9はこの要素をサポートしていません。この機能を検出する方法を検討しています。Modernizrはこの機能を検出せず、rectangle（createSVGRect）の場合のようにcreateSVGForeignObject（SVGSVGElementでは使用できません）を使用できないようです。

ありがとう！

Answer 1

これは、htmlコンテンツを統合するため、foreignObjectを使用する場合に機能するはずです...

<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>

requiredExtensionsの部分がw3cに提案され、これが彼らの応答でした。Firefoxはこれを実装していますが、私は他に何もテストしていません。Erikが提案しているように、requiredFeatures属性だけで逃げることができるかもしれません。

javascriptでテストしたい場合は、

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

Answer 2

JSでこの機能をテストする方法があります。以下は、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')));
        });