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

Posted 2023-02-21

【中文标题】如何在浏览器中检测对 VML 或 SVG 的支持

【英文标题】：How do you detect support for VML or SVG in a browser

【发布时间】：2010-10-13 20:06:19

【问题描述】：

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

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

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

VML 有什么等价物吗？

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

【问题讨论】：

关于这个论点的有趣文章：voormedia.com/blog/2012/10/…

【参考方案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。在 cmets 中建议 https://bugs.webkit.org/show_bug.cgi?id=17400 使用 feature#BasicStructure 替代方案，并给出我在 Firefox/Opera/Safari/Chrome (true) 和 IE (false) 上所期望的答案。

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

【讨论】：

好电话。我差点踩到那个地雷。

@masterxilo：Win7 上的 Chrome 35.0.1916.114 为 #BasicStructure 返回 true。但它仍然为 #Shape 返回 false - 你确定你尝试了正确的吗？

developer.mozilla.org/en-US/docs/Web/API/DOMImplementation/… 说这个被删除了，你知道他的api有没有替代品？

【参考方案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;
  

【参考方案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")

【讨论】：

好的，这很好。 VML 检测工作正常，但 SVG 检测在 Firefox 中失败。事实上，firefox 否认了 howtocreate.co.uk/tutorials/jsexamples/hasFeature.html 上的所有 SVG 功能。

作为对 firefox 的妥协，我将旧的 window.SVGAngle 检查与非常好的功能检查结合起来，如果其中一个成功，则支持它。如果您可以修复、改进或删除 supportSvg 功能，我可以接受您的回答。

嗯，linux 和 windows 上最新的 firefox 都失败了。然而，有趣的是，它成功了：“w3.org/TR/SVG11/feature#Shape”

仅供参考，您必须定义 v 命名空间前缀 document.namespaces.add('v', 'urn:schemas-microsoft-com:vml', '#default#VML');

这是来自 wout 的 svg.js github.com/wout/svg.js/blob/master/src/svg.js#L67的有效 SVG 支持检查

【参考方案4】：

你可能想跳过这个并使用一个 JS 库，它允许你跨浏览器进行矢量绘图，如果这是你的意图。然后，该库将处理此问题，如果支持则输出到 SVG，如果不支持则回退到画布、VML、flash、silverlight 等，具体取决于可用的内容。

执行此操作的库示例如下：

dojo.gfx

(http://docs.dojocampus.org/dojox/gfx/)

拉斐尔

(http://raphaeljs.com/)

SVGWeb

(http://code.google.com/p/svgweb/)

【讨论】：

raphaeljs 演示令人难以置信。 +1 让我开始这样做。

Raphael 确实很棒，我很喜欢并推荐给大家。但对于我想做的一件特别的事情来说，它太慢了。我也不觉得 raphael 检测 svg 的方式非常好（我不记得现在是什么了），并且想知道是否有更好、更官方的方式来做到这一点，因此提出了这个问题。

【参考方案5】：

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

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

Raphael 非常酷，但它不支持组的概念，这可能会根据您所做的工作而有所限制。 不过，德米特里可能会因为我这样说而激怒我。

【讨论】：

我可以建议var svgSupport = !!(window.SVGSVGElement);

你可以！我真的不知道杰克关于 JavaScript。

【参考方案6】：

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

【讨论】：

是的，modernizr 是当今这个问题的一个很好的回应。

【参考方案7】：

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

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

【参考方案8】：

另一方面... 如果您想在提供页面之前了解： 刮掉这个页面： http://caniuse.com/#cats=SVG&statuses=rec&nodetails=1 对于传入的浏览器/用户代理。 免责声明： 我还没有实现这个。 我希望 caniuse.com 会发布一个可以使用的 api。

马克T

【讨论】：

是的，我也更愿意为此使用 API。在我的情况下，我使用的是静态文件，所以这不是一个选择，但是一个好主意。