Html 删除CSS属性时的SVG过滤器工件

上下文

我正在开发一个浏览器扩展，它使用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\u filter）

属性添加到当前HTML页面中找到的任何视频元素的样式属性中，以便将此SVG过滤器应用于媒体内容。这是一个小的，视频和它的过滤器适用于它

问题

到目前为止，这种方法在Chrome和Opera上发挥着巨大的作用。不幸的是，由于一个错误，我无法为该浏览器使用

style=“display:none；”“

属性，我正在考虑应用此建议的解决方法

我注意到，Firefox中SVG过滤器的整体质量明显下降，出现了视觉瑕疵，尤其是在视频的较暗部分。当我从Opera和Chrome中的过滤器中删除

style=“display:none；”“

时也是如此，这表明此属性已链接到过滤器，不再正确渲染。下面是一个示例，左侧是不带

style=“display:none；”“

的过滤器，右侧是带属性的过滤器，从而产生更强、更平滑的过滤器：

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

问题

• 为什么缺少

  style=“display:none；”

  会导致过滤器 被渲染得如此糟糕

• 在Firefox中是否有任何方法可以正确呈现过滤器，如

  style=“display:none；”“

  不能在此上下文中与它一起使用吗

---

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

在SVG中，过滤器默认使用线性RGB颜色空间。然而，它似乎是硬连线的铬使用的sRGB色彩空间时，fi；过滤

元素。我不知道为什么——这可能是一个bug

通过指定

color-interpolation-filters="sRGB"

在你的过滤器上。不幸的是，如果您试图强制Chrome使用LinearRGB颜色空间（

color interpolation filters=“LinearRGB”

），它会忽略您

通过在

元素上指定零宽度和高度，可以在页面中隐藏SVG过滤器

谢谢，

color interpolation filters=“sRGB”

修复了Firefox中糟糕的渲染效果！我想使用

display:none

会在Chrome/Opera中强制使用sRGB吗？就隐藏SVG而言，您的建议在某些情况下仍然会影响布局。例如，在Youtube自动播放转换中，一个黑色细矩形将布局向底部移动（）。知道为什么吗？通常这不是问题。但是，如果它影响到您，只需添加

位置：绝对

，然后将其移出页面即可。例如：

left:-999