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 =＆＃34; sRGB＆＃34;来纠正或至少改善一些事情。在过滤器上。

feGaussianBlur应该在linearRGB颜色空间中使用预乘RGBA默认使用颜色插值滤波器，允许它切换到sRGB。这就是Firefox的情况，因为我编写了代码来实现这一点。

Answer 2

@RobertLongson在第一条评论中推荐的答案需要属性＆＃39; color-interpolation-filters =＆＃34; sRGB＆＃34;＆＃39;到feGaussianBlur过滤器。

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。