删除CSS属性时的SVG过滤器工件 [英] SVG filter artifacts when removing CSS property

问题描述

上下文

我正在使用浏览器扩展 Night Video Tuner ，它将SVG过滤器注入HTML页面使用Javascript，以滤除视频中的蓝光.以下是该扩展程序生成的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元素影响页面的布局.

我要在当前HTML页面中找到的任何视频元素的style属性中添加一个filter: url(#temperature_filter)属性，以便将此SVG过滤器应用于媒体内容.这是一个小提琴，展示了类似的设置，其中包含了视频及其滤镜./p>

问题

到目前为止，这种方法在Chrome和Opera上都非常有用.不幸的是，由于 Firefox中的错误，我无法使用style="display: none;"该浏览器的属性，并正在研究应用此其他建议的解决方法而是使用堆栈溢出问题.

我注意到SVG过滤器的整体质量在Firefox中明显下降，出现了视觉伪像，尤其是在视频的较暗部分.当我从Opera和Chrome中的过滤器中删除style="display: none;"时，情况也是如此，这表明此属性已链接到过滤器，无法再正确显示.这是一个示例，在左侧使用不带style="display: none;"的过滤器，在右侧使用具有属性的过滤器，从而使过滤器更坚固，更平滑:

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

问题

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

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

在此先感谢您的帮助！

解决方案

在SVG中，默认情况下，滤镜应该使用线性RGB颜色空间.但是，在过滤<video>元素时，似乎Chrome浏览器已硬连线到使用sRGB颜色空间.我不确定为什么-这可能是(可能是)错误.

通过指定

，您可以使Firefox的行为与Chrome相同.

color-interpolation-filters="sRGB"

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

通过在<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/

Context

I am working on a browser extension, Night Video Tuner, which injects SVG filters into HTML pages using Javascript, in order to filter out blue light from videos. Here is an example of what an SVG filter generated by the extension would look like:

<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;" is used to prevent the SVG element from affecting the layout of the page.

I am adding a filter: url(#temperature_filter) property to the style attribute of any video element found in the current HTML page in order to apply this SVG filter to the media content. Here is a small Fiddle showcasing a similar setup, with a video and its filter applied to it.

Issue

So far this approach is working like a charm on Chrome and Opera. Unfortunately, due to a bug in Firefox, I cannot use the style="display: none;" property for that browser and am looking into applying workarounds suggested by this other Stack Overflow question instead.

I noticed that the overall quality of the SVG filter is significantly degraded in Firefox, with visual artifacts appearing, especially in darker parts of the video. This is also the case when I remove style="display: none;" from the filter in Opera and Chrome, which suggests that this property is linked to the filter no longer rendering properly. Here is an example, with on the left hand side the filter without style="display: none;", and on the right hand side the filter with the property, resulting in a much stronger and smoother filter:

I am using the latest version of Opera, Firefox and Chrome on Windows, and this happens regardless of hardware acceleration being enabled or not.

Questions

• Why does the absence of style="display: none;" cause the filter to be rendered so poorly?

• Is there any workaround to render the filter correctly in Firefox, as style="display: none;" cannot be used with it in this context?

Thanks in advance, any help would be greatly appreciated!

解决方案

In SVG, filters are supposed to be using the Linear RGB colour space by default. However it appears as if Chrome is hardwired to using the sRGB colour space when fi;ltering <video> elements. I'm not sure why - it's possibly/probably a bug.

You can get Firefox to behave the same as Chrome, by specifying

color-interpolation-filters="sRGB"

on your filter. Unfortunately, Chrome ignores you if you try to force it to use the LinearRGB colour space (color-interpolation-filters="linearRGB").

And you can hide your SVG filter in the page by specifying a zero width and height on the <svg> element.

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

这篇关于删除CSS属性时的SVG过滤器工件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！