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

Question

使用 svg 高斯模糊滤镜执行跨浏览器图像模糊。总的来说，除了 Safari 之外，它运行得非常好。

在桌面 Safari 中，图像模糊，但也变亮了。这在任何其他浏览器中都不会发生(在 Firefox、Chrome、IE9-11 和 iOS 7 中的移动 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 应该在带有预乘 RGBA 的 linearRGB 颜色空间中工作，默认情况下，颜色插值过滤器允许将其切换到 sRGB。 Firefox 肯定是这种情况，因为我在那里编写了代码来执行此操作。