如何检测浏览器中对 VML 或 SVG 的支持

Question

我正在编写一些 javascript，需要在 SVG 或 VML 之间进行选择（或两者，或其他，这是一个奇怪的世界）。 虽然我知道目前只有 IE 支持 VML，但我更愿意检测功能而不是平台。

SVG 似乎有一些您可以使用的属性：例如 window.SVGAngle。

这是检查 SVG 支持的最佳方法吗？

VML 有等效的吗？

不幸的是 - 在 Firefox 中我可以很高兴地在 VML 中完成所有渲染而不会出现错误 - 只是屏幕上没有任何反应。 从脚本中很难发现这种情况。

Answer 1

另一方面...
当您想在提供页面之前了解情况时：
抓取此页面：
http://caniuse.com/#cats=SVG&statuses=rec&nodetails =1
对于传入浏览器/用户代理。
免责声明：
我还没有实现这个。
我希望 caniuse.com 能够发布一个 api 来使用。

马克特

Answer 2

我建议对 Crescentfresh 的答案进行一项调整 - 使用

document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1")

而不是

document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Shape", "1.0")

检测 SVG。 WebKit 目前对报告功能非常挑剔，尽管具有相对可靠的 SVG 支持，但仍会为 feature#Shape 返回 false。 https 的评论中建议使用 feature#BasicStructure 替代方案： //bugs.webkit.org/show_bug.cgi?id=17400 并给出了我在 Firefox/Opera/Safari/Chrome (true) 和 IE (false) 上期望的答案。

请注意，implementation.hasFeature 方法将忽略通过插件的支持，因此，如果您想检查例如 IE 的 Adob​​e SVG Viewer 插件，则需要单独执行此操作。 我想 RENESIS 插件也是如此，但尚未检查。

Answer 3

SVG 检查在 Chrome 中对我不起作用，所以我查看了 Modernizer 库在其检查中的作用 (https://github.com/Modernizr/Modernizr/blob/master/modernizr.js）。

根据他们的代码，这对我有用：

function supportsSVG() {
    return !!document.createElementNS && !!document.createElementNS('http://www.w3.org/2000/svg', "svg").createSVGRect;
  }

Answer 4

对于 VML 检测，Google 地图的操作如下（搜索“function Xd”）：

function supportsVml() {
    if (typeof supportsVml.supported == "undefined") {
        var a = document.body.appendChild(document.createElement('div'));
        a.innerHTML = '<v:shape id="vml_flag1" adj="1" />';
        var b = a.firstChild;
        b.style.behavior = "url(#default#VML)";
        supportsVml.supported = b ? typeof b.adj == "object": true;
        a.parentNode.removeChild(a);
    }
    return supportsVml.supported
}

我明白您对 FF 的意思：它允许创建任意元素，包括 vml 元素（） 。 看起来这是对 邻接属性 的测试可以确定创建的元素是否真正被解释为 vml 对象。

对于 SVG 检测，这很有效：

function supportsSvg() {
    return document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Shape", "1.0")
}

Answer 5

您可能想跳过此步骤并使用 JS 库，它允许您跨浏览器进行矢量绘图（如果您有意这样做）。 然后，库将处理此问题，如果支持，则输出到 SVG；如果不支持，则回退到 canvas、VML、flash、silverlight 等，具体取决于可用的内容。

执行此操作的库示例如下（排名不分先后）：

• dojo.gfx (http://docs.dojocampus.org/dojox/gfx/)
• 拉斐尔 (http://raphaeljs.com/)
• SVGWeb ( http://code.google.com/p/svgweb/）

Answer 6

var svgSupport = (window.SVGSVGElement) ? true : false;

如果您假设非 SVG 浏览器是 IE5.5 或更高版本并且可以支持 VML，则可以使用。
在 IE6、Firefox 8、Chrome 14.0 上测试。

Raphael 非常酷，但它不支持组的概念，这可能会受到限制，具体取决于您正在做什么。
不过，德米特里可能会因为我这么说而责骂我。

Answer 7

您可能需要查看 http://www.modernizr.com/docs/#features-misc 因为它包含对 SVG 功能实际检测的支持，而不是容易损坏的用户代理嗅探。

Answer 8

SVG 检查在 Chrome 中不起作用，因为它指定版本 1.0。 这应该效果更好：

document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Shape", "1.1")