代码之家 › 专栏 › 技术社区 › Jim T

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

vml browser-detection svg internet-explorer javascript

Jim T · 技术社区 · 15 年前

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

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

VML是否有任何等价物?

不幸的是,在firefox中,我可以很高兴地在VML中进行所有渲染,而不会出错,只是屏幕上什么也没有发生。从脚本中很难发现这种情况。

8 回复 | 直到 15 年前

Levi Lindsey 10 年前

我建议对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支持。这个 feature#BasicStructure 建议的备选方案见以下评论: https://bugs.webkit.org/show_bug.cgi?id=17400 并给出了我在Firefox/Opera/Safari/Chrome(真)和IE(假)上期望的答案。

请注意 implementation.hasFeature 这种方法将忽略通过插件提供的支持,因此,如果您想检查例如用于IE的Adobe SVG查看器插件,则需要单独进行检查。我想RENESIS插件也是如此,但还没有检查。

Pamela Fox 13 年前

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

Crescent Fresh nosklo 15 年前

对于VML检测,以下是 google maps does (搜索“ 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> )1.看来这是对未来的考验 adjacency attribute 它可以确定所创建的元素是否真正解释为vml对象。

对于SVG检测,这非常有效:

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

Brad 12 年前

您可能希望跳过这一步,使用JS库,这将允许您跨浏览器绘制矢量图,如果这是您的意图的话。然后,库将处理这个问题,如果支持,则输出到SVG,如果不支持,则返回到canvas、VML、flash、silverlight等,具体取决于可用的内容。

执行此操作的库示例如下,没有特定顺序:

( http://docs.dojocampus.org/dojox/gfx/ )
( http://raphaeljs.com/ )
SVGWeb http://code.google.com/p/svgweb/ )

eeerahul Arrj 13 年前

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

如果您假设非SVG浏览器是IE5.5或更高版本,并且可以支持VML,那么它是有效的。

拉斐尔很酷,但它不支持群体的概念,群体的概念可能会受到限制,这取决于你在做什么。不过,德米特里可能会因为我这么说而解雇我。

Norman H 12 年前

http://www.modernizr.com/docs/#features-misc 因为它支持SVG功能的实际检测,而不是容易损坏的用户代理嗅探。

Alex_S 11 年前

SVG检查在Chrome中不起作用,因为它指定了版本1.0。这应该更好地发挥作用:

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

MarkT 13 年前

当您在提供页面之前想知道: http://caniuse.com/#cats=SVG&statuses=rec&nodetails=1 用于传入的浏览器/用户代理。免责声明: 我还没有实现这个。我希望caniuse.com会发布一个api来与之合作。

市场