css - 使所有图像棕褐色 svg 代码不起作用？

Question

所以，我想制作所有具有棕褐色效果的图像，但是我在 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); ？

Answer 1

我猜 [id="sepia"] 中的双引号。此外，您对棕褐色的值(value)观似乎有点偏离。这是棕褐色的更好起点:

       "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。)