http://jsfiddle.net/vtDYg/6/ <svg class="sg-blur-2"> <defs> <filter id="sg-blur-2"> <feGaussianBlur stdDeviation="2" color-interpolation-filters="sRGB"></feGaussianBlur> </filter> </defs> <image xlink:href="http://fillmurray.com/300/100" width="100%" height="100%" filter="url(#sg-blur-2)"></image></svg>据我所知，svg规范指示feGaussianBlur滤镜默认应使用linearRGB颜色空间.除Safari 7外，所有浏览器 似乎都不正确，默认为sRGB.奇怪的是，移动Safari也默认为sRGB.Using svg guassian blur filter to perform cross browser image blurring. Overall, it works really well except in the case of Safari.In desktop Safari, the image is blurred but it is also lightened. This doesn't happen in any other browser (literally tested in Firefox, Chrome, IE9-11, and mobile Safari in iOS 7).Here's a jsfiddle demonstrating the live svg filter and a linked screenshot from what Safari is seeing, http://jsfiddle.net/vtDYg/3/Here also is the svg code current in use:<svg class="sg-blur-2"> <defs> <filter id="sg-blur-2"> <feGaussianBlur stdDeviation="2"></feGaussianBlur> </filter> </defs> <image xlink:href="http://fillmurray.com/300/100" width="100%" height="100%" filter="url(#sg-blur-2)"></image></svg>Here's what desktop Safari is seeing:I thought the color space of the jpeg in question might be an issue, so I specified the 'color-profile' attribute to both 'sRGB', 'RGB', and 'rgb' but that had no effect. 解决方案 The answer, recommended by @RobertLongson in the first comment, requires the attribute 'color-interpolation-filters="sRGB"' to the feGaussianBlur filter.http://jsfiddle.net/vtDYg/6/<svg class="sg-blur-2"> <defs> <filter id="sg-blur-2"> <feGaussianBlur stdDeviation="2" color-interpolation-filters="sRGB"></feGaussianBlur> </filter> </defs> <image xlink:href="http://fillmurray.com/300/100" width="100%" height="100%" filter="url(#sg-blur-2)"></image></svg>To the best of my knowledge, the svg spec indicates that feGaussianBlur filter should use the linearRGB color space by default. All browsers except Safari 7 seem to do this incorrectly and default to sRGB. Oddly, mobile Safari also defaults to sRGB. 这篇关于Safari中的SVG高斯模糊会意外使图像变亮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！
