移除 CSS 属性时的 SVG 过滤器伪影

Question

上下文

我正在开发一个浏览器扩展程序Night Video Tuner，它使用 Javascript 将 SVG 过滤器注入 HTML 页面，以过滤掉视频中的蓝光。以下是扩展生成的 SVG 过滤器的示例：

<svg xmlns="http://www.w3.org/2000/svg">
  <filter id="temperature_filter" style="display: none;">
    <feColorMatrix type="matrix" values="1 0 0 0 0 0 0.6949030005552019 0 0 0 0 0 0.4310480202110507 0 0 0 0 0 1 0"></feColorMatrix>
  </filter>
</svg>

style="display: none;"用于防止SVG元素影响页面布局。

我将filter: url(#temperature_filter) 属性添加到当前 HTML 页面中找到的任何视频元素的样式属性，以便将此 SVG 过滤器应用于媒体内容。这是一个小的Fiddle showcasing a similar setup，上面有一个视频及其过滤器。

问题

到目前为止，这种方法在 Chrome 和 Opera 上的效果非常好。不幸的是，由于bug in Firefox，我无法为该浏览器使用style="display: none;" 属性，我正在考虑应用other Stack Overflow question 建议的解决方法。

我注意到 SVG 过滤器的整体质量在 Firefox 中显着下降，出现了视觉伪影，尤其是在视频的较暗部分。当我从 Opera 和 Chrome 中的过滤器中删除 style="display: none;" 时也是这种情况，这表明该属性链接到过滤器不再正确呈现。下面是一个示例，左侧是没有style="display: none;" 的过滤器，右侧是带有属性的过滤器，从而产生更强大和更平滑的过滤器：

我在 Windows 上使用最新版本的 Opera、Firefox 和 Chrome，无论是否启用硬件加速都会发生这种情况。

问题

• 为什么没有style="display: none;" 会导致过滤器 渲染得这么差？

• 是否有任何解决方法可以在 Firefox 中正确呈现过滤器，如 style="display: none;" 在这种情况下不能和它一起使用吗？

提前致谢，任何帮助将不胜感激！

Answer 1

在 SVG 中，滤镜应该默认使用线性 RGB 颜色空间。然而，在过滤<video> 元素时，Chrome 似乎是硬连线到使用 sRGB 颜色空间。我不知道为什么 - 它可能/可能是一个错误。

您可以通过指定让 Firefox 的行为与 Chrome 相同

color-interpolation-filters="sRGB"

在您的过滤器上。不幸的是，如果您尝试强制 Chrome 使用 LinearRGB 颜色空间 (color-interpolation-filters="linearRGB")，Chrome 会忽略您。

您可以通过在 <svg> 元素上指定零宽度和高度来隐藏页面中的 SVG 过滤器。

<video autoplay controls muted src=" https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" style="width: 488px; height: 360px; filter: url(#temperature_filter)">
</video>

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
  <filter id="temperature_filter" color-interpolation-filters="sRGB">
    <feColorMatrix type="matrix" values="1 0 0 0 0 0 0.694 0 0 0 0 0 0.431 0 0 0 0 0 1 0"></feColorMatrix>
  </filter>
</svg>

https://jsfiddle.net/fyy5wrkw/8/