SVG中foreignObject的特征检测答案

【问题标题】：Feature detection of foreignObject in SVGSVG中foreignObject的特征检测
【发布时间】：2012-06-23 03:26:37
【问题描述】：

我在 SVG 中使用了 foreignObject 元素，但是 IE9 不支持这个元素。我正在寻找一种检测此功能的方法。 Modernizr 没有检测到这个功能，而且我似乎不能像对矩形 (createSVGRect) 那样使用 createSVGForeignObject（在 SVGSVGElement 上不可用）。

谢谢！

【问题讨论】：

明确一点：createSVGRect() 不会创建一个 rect 元素，它会创建一个 rect 对象。要创建元素，只需使用document.createElementNS(...)。

标签： svg feature-detection

【解决方案1】：

如果您想使用 foreignObject，这应该可以工作，因为它集成了 html 内容...

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

必需的扩展部分 proposed to w3c 和 this was their response。 Firefox 确实实现了这一点，但我还没有测试过其他任何东西。正如 Erik 建议的那样，您也许可以只使用 requiredFeatures 属性。

如果你想用 javascript 测试试试

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

【讨论】：

http://www.w3.org/TR/SVG11/feature#Extensibility 是 SVG 1.1 中为 foreignObject 元素定义的特征字符串，如果你想测试的话。您可以在 requiredExtensions 中列出多个值（以空格分隔）。
感谢您的帮助。如果用户代理支持不可用，此技术提供替代渲染。但是，我一直在寻找 Javascript 解决方案（用于条件代码）。这就是我要使用的/SVGForeignObject/.test(document.createElementNS('http://www.w3.org/2000/svg', 'svg').appendChild(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).toString())
只需typeof SVGForeignObjectElement !== 'undefined' 也可以完成这项工作。
+1 document.implementation.hasFeature("w3.org/TR/SVG11/feature#Extensibility","1.1")
这个答案对我有用，除了你能更新hasFeature url（删除额外的www。）。

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

【讨论】：