Safari中的SVG高斯模糊意外地使图像变亮

Question

使用svg guassian模糊过滤器执行跨浏览器图像模糊.总的来说,除了Safari之外,它的效果非常好.

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

这是一个jsfiddle演示实时svg过滤器和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'但是没有效果.

Answer 1

看起来你可以通过在滤镜上设置color-interpolation-filters ="sRGB"来纠正或至少改进一些东西.

feGaussianBlur应该在linearRGB色彩空间中使用预乘RGBA,默认情况下使用颜色插值滤镜,允许将其切换为sRGB.这就是Firefox的情况,因为我编写了代码来实现这一点.

Answer 2

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