功能檢測支持svg過濾器

我需要功能檢測瀏覽器是否支持svg過濾器（feGaussianBlur，具體）。我將如何去測試這個？ Safari不支持過濾器，靜靜地忽略過濾器。功能檢測支持svg過濾器

2012-03-16 wheresrhys

你也許還檢查可用的接口的枚舉，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

來源

2012-03-19 13:33:40

我最初在螢火蟲的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

我創建了一個小提琴http://jsfiddle.net/yxVSe/，它檢查GaussianBlur屬性的存在性。說高斯布爾有一個方法setStdDeviation，我們檢查該方法的存在，當我們得出結論，當前的瀏覽器劑量支持該過濾器。

當這個小提琴在檢查safari文本將是紅色，而在Firefox中它將是綠色的。

來源

2012-03-19 08:36:06 rajkamal

好極了！好的答案 – 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

來源

2014-01-10 10:03:20 Nedudi

功能檢測支持svg過濾器

回答

相關問題