2

そのため、すべての画像をセピア効果で作成したかったのですが、SVGでグレースケールに使用するコードをセピアに変更すると機能しません...

これはグレースケールです：a img { filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); }

そして、これは機能しないセピアです：img { filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id="sepia"><feColorMatrix type='matrix' values='0.393 0.769 0.189 0 0 0.349 0.686 0.168 0 0 0.272 0.534 0.131 0 0 0 0 0 1 0'/></filter></svg>#sepia"); }

セピアコードの何が問題になっているのか誰か教えてもらえますか？

そして、私が求めているので、セピアとグレースケールの両方の画像を作成し、それを作成できるWebキットのように不透明度で遊ぶ方法はあり-webkit-filter: grayscale(1) sepia (0.2);ますか？

4

1 に答える 1

3

[id="sepia"]の二重引用符を推測しています。また、セピアの値は少しずれているようです。これは、セピア色から始めるのに適した場所です。

       "0.30 0.30 0.30 0 0
        0.25 0.25 0.25 0 0
        0.20 0.20 0.20 0 0
        0.00 0.00 0.00 1 0"

他の質問では、カラーマトリックス値間でアニメーション化するために使用できます<animate>が、svgアニメーションはIE（IE10でも）では機能しないため、意味のあるスクリプトを作成する必要があります。（更新-IE用のFakeSMIL javascriptライブラリを試すことができます-ほとんどのSMILを処理できます。）

于 2012-11-01T20:19:58.540 に答える