I need to feature detect whether a browser supports svg filters (feGaussianBlur, to be specific). How would I go about testing for this? Safari, which doesn't support the filter, silently ignores the filter.
问题:
回答1:
You could probably also check the enums available on the interfaces, e.g:
var supportsfilter = typeof SVGFEColorMatrixElement !== undefined &&
SVGFEColorMatrixElement.SVG_FECOLORMATRIX_TYPE_SATURATE==2;
That way you won't have to construct new elements, as in https://stackoverflow.com/a/9767059/109374. I've not tested to see whether this works as expected in Safari.
Update: Patch submitted to modernizr: https://github.com/Modernizr/Modernizr/pull/531
回答2:
I have created a fiddle http://jsfiddle.net/yxVSe/ which examines the existence of the properties of GaussianBlur.
Say GaussianBlur has a method setStdDeviation
, we check for the existence of that method, when fails we come to a conclusion that the current browser dosent support that filter.
When this fiddle is check in safari texts would be in red, while in firefox it will be green.
回答3:
I added a small modification for legacy Androids bug
var supportsfilter = window['SVGFEColorMatrixElement'] !== undefined && SVGFEColorMatrixElement.SVG_FECOLORMATRIX_TYPE_SATURATE == 2