我需要功能检测浏览器是否支持svg过滤器(feGaussianBlur,具体)。我将如何去测试这个? Safari不支持过滤器,静静地忽略过滤器。功能检测支持svg过滤器
回答
你也许还检查可用的接口的枚举,e.g:
var supportsfilter = typeof SVGFEColorMatrixElement !== undefined &&
SVGFEColorMatrixElement.SVG_FECOLORMATRIX_TYPE_SATURATE==2;
这样你就不需要建立新的元素,如https://stackoverflow.com/a/9767059/109374。我还没有测试过,看看它在Safari中是否按预期工作。
更新: 补丁提交的Modernizr:https://github.com/Modernizr/Modernizr/pull/531
我创建了一个小提琴http://jsfiddle.net/yxVSe/,它检查GaussianBlur属性的存在性。 说高斯布尔有一个方法setStdDeviation
,我们检查该方法的存在,当我们得出结论,当前的浏览器剂量支持该过滤器。
当这个小提琴在检查safari文本将是红色,而在Firefox中它将是绿色的。
好极了!好的答案 – wheresrhys 2012-03-19 11:31:56
'if(filterTag.constructor.toString()。indexOf('SVGFilterElement')!= -1)'test不正确的检测Opera(它支持svg过滤器)。 – 2012-03-19 11:36:58
@Erik Dahlstrom - 不错的地方,虽然玩了一下,但看起来这行代码是不必要的。我已经将测试缩减到只有3行,这在浏览器中给出了期望的结果'var blur = document.createElementNS(“http://www.w3.org/2000/svg”,“feGaussianBlur”); \t \t blur.setAttribute(“stdDeviation”,“2”); \t \t return(typeof blur.setStdDeviation!=='undefined');' – wheresrhys 2012-03-19 12:43:21
我增加了一个小的修改对传统机器人会错误
var supportsfilter = window['SVGFEColorMatrixElement'] !== undefined && SVGFEColorMatrixElement.SVG_FECOLORMATRIX_TYPE_SATURATE == 2
- 1. 功能检测支持DOM范围(Modernizr)
- 2. ASP.NET检测SVG功能服务器端
- 3. 检测浏览器的特定功能支持?
- 4. Svg过滤器vs CSS过滤器 - 模糊性能差异
- 5. SVG过滤器性能问题
- 6. PHP HTML过滤器功能
- 7. 过滤器功能问题
- 8. 如何在iPhone上检测Grand Central Dispatch功能支持?
- 9. 浏览器检测与功能检测
- 10. Windows Phone 8支持DirectShow过滤器吗?
- 11. 过滤功能
- 12. 如何(功能)检测浏览器是否支持WebM alpha透明度?
- 13. 检测浏览器是否支持jQueryMobile
- 14. 检测浏览器对RFC5987的支持
- 15. 检测SSL浏览器支持
- 16. javascript:如何检测HTML img元素支持SVG?
- 17. 哪种SVG支持检测方法最好?
- 18. 哪些网页浏览器支持SVG过滤,并将上一层作为源?
- 19. Firefox中的SVG过滤器
- 20. 单元测试使用$过滤器控制器功能(“翻译”)
- 21. 如何检测用户是否具有ActiveX过滤功能?
- 22. 如何检查浏览器对功能/事件的支持?
- 23. 功能Perl:过滤器,迭代器
- 24. jQuery不支持SVG
- 25. jsdom不支持SVG
- 26. 检测支持通知
- 27. 如何检测`focusin`支持?
- 28. 检测是否支持SSL
- 29. 检测Android语言支持
- 30. Android人脸检测支持
我最初在萤火虫的DOM树中寻找这样的东西,但找不到任何东西。这些接口是什么? - 没有添加到窗口对象的全局变量? *编辑*我现在看到他们 - 我必须设置萤火虫以显示不可枚举的属性 – wheresrhys 2012-03-19 14:33:41
虽然有点额外的奇怪 - 属性不会显示在DOM中(不会初始化?),直到添加SVG后在控制台中调用页面或“SVGFEColorMatrixElement”。我已经在safari中进行了测试,并且引发了一个引用错误,因此您可能会这样做,因此测试需要一个try/catch块。 +1 – wheresrhys 2012-03-19 14:44:37
如果浏览器实现相应的DOM接口,那么这些常量应该始终存在。如何使用typeof的变体? – 2012-03-19 16:19:45