Question

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

SVG似乎有一些你可以去的属性：例如window.SVGAngle。

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

VML是否有任何等价物？

Unfortuntaly - 在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目前对报告功能非常挑剔，尽管拥有相对稳固的SVG支持，但feature#Shape仍返回false。 https://bugs.webkit.org/show_bug.cgi?id=17400的评论中提出了feature#BasicStructure替代方案，并为我提供了我在Firefox / Opera / Safari / Chrome（true）和IE（false）上的预期答案。

请注意，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 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>）。看起来它是adjacency attribute的测试，可以确定创建的元素是否真正被解释为vml对象。

对于SVG检测，这很好用：

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

Answer 4

您可能希望跳过这个并使用JS库，这将允许您进行跨浏览器的矢量绘图，如果这是意图。然后库将处理这个，如果支持则输出到SVG，如果没有，则输出到画布，VML，flash，silverlight等，具体取决于可用的内容。

执行此操作的库的示例没有特别的顺序：

dojo.gfx （http://docs.dojocampus.org/dojox/gfx/）
Raphaël（http://raphaeljs.com/）
SVGWeb （http://code.google.com/p/svgweb/）

Answer 5

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

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

拉斐尔非常酷，但它不支持群组的概念，这可能会受到限制，具体取决于你在做什么。不过，德米特里可能会因为这样说而激怒我。

Answer 6

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

Answer 7

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

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

Answer 8

另一方面...... 如果您想在服务页面之前知道：抓这个页面： http://caniuse.com/#cats=SVG&statuses=rec&nodetails=1 对于传入的浏览器/用户代理。免责声明：我还没有实现这一点。因为我希望caniuse.com能够发布api来与之合作。

MARKT

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

8 个答案: