Safari中的SVG高斯模糊意外地照亮了图像

使用svg guassian模糊过滤器执行跨浏览器图像模糊。总的来说，除了Safari之外，它工作得非常好

在桌面Safari中，图像模糊，但也会变亮。这在任何其他浏览器中都不会发生（在Firefox、Chrome、IE9-11和iOS 7中的mobile Safari中进行了测试）

这里有一个JSFIDLE演示了live svg过滤器和Safari看到的链接屏幕截图

以下是当前正在使用的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的颜色空间可能是一个问题，因此我为“sRGB”、“RGB”和“RGB”指定了“颜色配置文件”属性，但没有任何效果。

答案由@RobertLongson在第一条评论中推荐，需要为feGaussianBlur过滤器指定属性“color interpolation filters=“sRGB”）

---

据我所知，svg规范指出feGaussianBlur过滤器在默认情况下应该使用linearRGB颜色空间。除Safari 7之外的所有浏览器似乎都不正确地执行此操作，默认为sRGB。奇怪的是，mobile Safari也默认为sRGB。

似乎可以通过在过滤器上设置color interpolation filters=“sRGB”来纠正或至少改进问题

---

feGaussianBlur应在linearRGB颜色空间中工作，默认情况下使用预乘RGBA，并使用颜色插值过滤器将其切换到sRGB。Firefox就是这样，因为我在那里编写了代码。

为颜色插值过滤器（）指定不同的值对Safari有什么影响吗？如果没有，那么它可能在错误的颜色空间中运行。@RobertLongson请补充这一点作为答案，这样我就可以接受它，对它进行投票，并对它进行镀金。这确实有效。可能是复制品。我很好奇。在阅读了您引用的规范部分后，我突然想到，表面上看来，除了桌面Safari 7之外，所有浏览器都默认使用sRGB而不是linearRGB。我对此没有深刻的理解，我不相信这是真的。Safari的linearRGB实现被破坏了。在其他浏览器中，linearRGB被正确地支持为SVG过滤器的默认值。这肯定是出了问题。我提交了一份文件。@RobertLongson-不幸的是，我仍然能在Safari中看到闪电，这里有一个示例页面：有什么想法吗？谢谢@jbenjohnson Safari是开源的，下载它并修复David Bonnet提出的bug，或者付钱给其他人。

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