2017-11-10 7 views
1

このコードのフィルタを使用しようとしていますhttp://bl.ocks.org/nbremer/0e98c72b043590769facc5e829ebf43f。達成された効果はWin 7のFirefox 56(64ビット)では良いですが、Chrome 62(64ビット)では奇妙です。色ははるかに軽く、効果はFFほど滑らかに見えません。SVGのfeGaussianBlurとfeColorMatrixフィルタはChromeで動作しません。

Safariでこれらのフィルタが正しく表示されないことについて多くの質問がありましたが、Chromeについては何も見つかりませんでした。

  • Firefoxの

enter image description here

  • クローム

enter image description here

下のスクリーンショットを参照してください。

どのような違いが生じているのか、Chromeでどのように修正するのか

+0

私はChrome 61でそれを見ていません。うまくいくようです。どのバージョンを使用していますか? –

+0

Windows 7マシンのChrome 62(64ビット)。 – GuitarExtended

+0

Chromeを62に更新しましたが、それでも問題なく動作します。 –

答えて

2

カラーマトリックスフィルタが適用さは

<feColorMatrix mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" /> 

を読み込むことがされて - 理論的には - 以下のコンポーネント転送フィルタと数学的に同一で実際に

<feComponentTransfer> 
    <feFuncA type="linear" slope="19" intercept="-9" /> 
</feComponentTransfer> 

、実装は違いを作るように見えます。私にとって、2番目のバージョンはChrome 62(Linux)で意図した結果を得ていますが、最初のバージョンは説明どおりに洗い流されています。

残念ながら、WindowsとSafariのFirefoxでは両方のバージョンが動作しません。不透明度がtheshold値以下であれば、それは上記の場合は、0に設定1にしかし、実際にそれを設定します。

Codepen

フィルタは述べています「カットオフ」値のようなものを作成しよう中間の小さな領域(0.437 <不透明度< 0.526)であり、結果として生じる不透明度はその間にある。

あなたが本当に離散関数で作業したい場合は、この1のようになります。

<feComponentTransfer> 
    <feFuncA type="discrete" tableValues="0 1" /> 
</feComponentTransfer> 

Codepen

そして、これは、Windows用のFirefoxで動作するようです。

+0

あなたが正しいです、それはChromeの問題を解決します。しかし、今私はFirefoxで "壊れた"バージョンを取得! – GuitarExtended

関連する問題