在SVG中检测foreignObject的特性

Question

我正在使用SVG中的foreignObject元素，但是IE9不支持这个元素。我正在寻找一种检测此功能的方法。Modernizr无法检测此功能，似乎我不能像他们对矩形(createSVGRect)那样使用createSVGForeignObject(在SVGSVGElement上不可用)。谢谢！

- Karl Guillotte

---

只是为了明确一点：createSVGRect()不是创建一个矩形元素，而是创建一个矩形对象。要创建元素，只需使用document.createElementNS(...)即可。 - Erik Dahlström

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

需要的扩展部分建议提交给W3C，并且这是他们的回应。Firefox确实实现了它，但我没有测试其他任何内容。正如Erik建议的那样，您可能仅需使用requiredFeatures属性。

如果您想在JavaScript中进行测试，请尝试

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

- Robert Longson

---

http://www.w3.org/TR/SVG11/feature#Extensibility 是在 SVG 1.1 中定义的 foreignObject 元素的功能字符串，如果您想要测试该功能，请在 requiredExtensions（以空格分隔）中列出多个值。 - Erik Dahlström

感谢您的帮助。这种技术提供了一种备选渲染方式，以防用户代理不支持。然而，我正在寻找一个JavaScript解决方案（用于条件代码）。这就是我将使用/SVGForeignObject/.test(document.createElementNS('http://www.w3.org/2000/svg', 'svg').appendChild(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).toString())的原因。 - Karl Guillotte

typeof SVGForeignObjectElement !== 'undefined' 这样简单的写法也能达到同样的效果。 - Karl Guillotte

+1 对于 document.implementation.hasFeature("w3.org/TR/SVG11/feature#Extensibility","1.1")。 - nathan-m

这个答案对我有用，只是你能否更新hasFeature网址（移除额外的www）？ - Nathaniel Flick

我编辑了答案，但现在无论你传入什么参数，hasFeature 在 Chrome 和 Firefox 中都返回 true。你不能再用这种方式进行特性检测了。 - Robert Longson

Answer 2

有一种方法可以在JS中测试此功能，以下内容摘自现代浏览器的最新提交（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')));
        });

- deansimcox