我正在编写一些 javascript,需要在 SVG 或 VML 之间进行选择(或两者兼而有之,或其他东西,这是一个奇怪的世界)。虽然我知道目前只有 IE 支持 VML,但我更愿意检测功能而不是平台。
SVG 似乎有一些您可以使用的属性:例如 window.SVGAngle。
这是检查 SVG 支持的最佳方式吗?
VML有什么等价物吗?
不幸的是 - 在 Firefox 中,我可以很高兴地在 VML 中进行所有渲染而不会出错 - 屏幕上什么也没有发生。从脚本中很难检测到这种情况。
我正在编写一些 javascript,需要在 SVG 或 VML 之间进行选择(或两者兼而有之,或其他东西,这是一个奇怪的世界)。虽然我知道目前只有 IE 支持 VML,但我更愿意检测功能而不是平台。
SVG 似乎有一些您可以使用的属性:例如 window.SVGAngle。
这是检查 SVG 支持的最佳方式吗?
VML有什么等价物吗?
不幸的是 - 在 Firefox 中,我可以很高兴地在 VML 中进行所有渲染而不会出错 - 屏幕上什么也没有发生。从脚本中很难检测到这种情况。
我建议对 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。在对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 插件也是如此,但尚未检查。
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;
}
对于 VML 检测,谷歌地图的作用如下(搜索“ 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>
)。看起来这是对邻接属性的测试,可以确定创建的元素是否真正被解释为 vml 对象。
对于 SVG 检测,这很好用:
function supportsSvg() {
return document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Shape", "1.0")
}
你可能想跳过这个并使用一个 JS 库,它允许你跨浏览器进行矢量绘图,如果这是意图的话。然后,该库将处理此问题,如果支持则输出到 SVG,如果不支持则回退到画布、VML、flash、silverlight 等,具体取决于可用的内容。
将执行此操作的库示例如下:
var svgSupport = (window.SVGSVGElement) ? true : false;
如果您假设非 SVG 浏览器是 IE5.5 或更高版本并且可以支持 VML,则可以工作。在 IE6、Firefox 8、Chrome 14.0 上测试。
Raphael 非常酷,但它不支持组的概念,这可能会根据您所做的工作而有所限制。不过,德米特里可能会因为我这么说而激怒我。
您可能想查看http://www.modernizr.com/docs/#features-misc,因为它包含对 SVG 功能的实际检测的支持,而不是很容易损坏的用户代理嗅探。
SVG 检查在 Chrome 中不起作用,因为它指定了 1.0 版。这应该会更好:
document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Shape", "1.1")
另一方面...如果您想在提供页面之前知道:刮掉此页面: http ://caniuse.com/#cats=SVG&statuses=rec&nodetails=1 对于传入的浏览器/用户代理。免责声明:我还没有实现这个。正如我希望 caniuse.com 将发布一个可使用的 api。
马克T