SVGフィルターアーティファクト

Question

私はビデオからの青色光をフィルタリングするためには、Javascriptを使用してHTMLページにSVGフィルターを注入ブラウザ拡張機能、Night Video Tuner、に取り組んでいますコンテキスト

をCSSプロパティを削除するとき。ページのレイアウトに影響を与えることから、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フィルターがどのように見えるかの例です。

このSVGフィルタをメディアコンテンツに適用するには、現在のHTMLページにあるビデオ要素のstyle属性にfilter: url(#temperature_filter)プロパティを追加しています。ここには、ビデオとそのフィルタが適用された小さな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;"原因フィルタが存在しないことは、それほど悪いレンダリングされていますか？

• style="display: none;"はこのコンテキストでは使用できないため、Firefoxでフィルタを正しくレンダリングするための回避策はありますか？

ご協力いただきありがとうございます。

Answer 1

SVGでは、フィルタはデフォルトでリニアRGBカラースペースを使用すると想定されています。しかし、あたかもクロムが、<video>要素を含むとき、sRGB色空間を使用するようにハードワイヤード接続されているかのように見えます。なぜ、それはおそらく/おそらくバグでしょう。

あなたのフィルタに

color-interpolation-filters="sRGB" 

を指定することでFirefoxは、クロームと同じように動作するように取得することができます。残念ながら、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/