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

【问题标题】：Make all images sepia svg code not working?使所有图像棕褐色 svg 代码不起作用？
【发布时间】：2012-10-22 09:36:45
【问题描述】：

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

【问题讨论】：

标签： css svg svg-filters

【解决方案1】：

我猜是 [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。）

【讨论】：