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-kit 这样的不透明度来制作它-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 回答