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

Question

我正在写一些javascript,需要在SVG或VML之间进行选择(或两者兼而有之,它是一个奇怪的世界).虽然我知道目前只有IE支持VML,但我更倾向于检测功能而不是平台.

SVG似乎有一些属性,你可以去:例如window.SVGAngle.

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

VML有任何等价物吗？

不幸的是 - 在firefox中,我可以非常愉快地在VML中完成所有渲染而不会出现错误 - 屏幕上没有任何反应.从脚本中检测出这种情况非常困难.

Answer 1

我建议对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目前对报告功能非常挑剔,feature#Shape尽管拥有相对可靠的SVG支持,但仍返回false .该feature#BasicStructure替代建议的意见https://bugs.webkit.org/show_bug.cgi?id=17400,给我我预计火狐/歌剧/ Safari /铬(真)和IE(假)的答案.

请注意,该implementation.hasFeature方法将忽略通过插件的支持,因此如果您要检查例如IE的Adobe SVG Viewer插件,则需要单独执行此操作.我想像RENESIS插件也是如此,但还没有检查过.

Answer 2

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 3

对于VML检测,这是google maps所做的(搜索" 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元素(<v:shape>).看起来它是对adjacency属性的测试,它可以确定创建的元素是否真正被解释为vml对象.

对于SVG检测,这很好用:

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