Safari中的SVG高斯模糊会意外使图像变亮 [英] SVG gaussian blur in Safari unexpectedly lightens image

问题描述

使用svg波斯模糊过滤器执行跨浏览器图像模糊处理.总体来说，除了Safari之外，它的运行情况都非常好.

在桌面Safari中，图像模糊但也变亮.在其他任何浏览器中都不会发生这种情况(在Firefox，Chrome，IE9-11和iOS 7中的移动Safari上进行了实际测试).

这是一个展示实时svg过滤器的jsfiddle，以及Safari看到的链接的屏幕截图， http://jsfiddle.net/vtDYg/3/

这也是当前使用的svg代码:

<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>

以下是桌面Safari看到的内容:

我认为问题jpeg的色彩空间可能是个问题，因此我将'color-profile'属性指定为'sRGB'，'RGB'和'rgb'，但这没有任何作用.

解决方案

@RobertLongson在第一条评论中建议的答案要求feGaussianBlur滤镜具有属性'color-interpolation-filters ="sRGB"'.

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高斯模糊会意外使图像变亮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！