CSS 灰度过滤器突然停止工作

Question

最近我网站 (DezinoGraphist.com) 上的 Grayscacle 效果突然停止工作。 CSS 代码为特定部分(关联)的所有元素添加了灰度效果，直到您将鼠标悬停在它们上方，然后这些元素才变得有规律地着色。

它在很长一段时间内都运行良好，但现在突然停止工作了。我没有改变任何东西。以下是供引用的 CSS 代码:

img.grayscale{
filter: grayscale(100%);
-webkit-filter: grayscale(100%); /* For Webkit browsers */
filter: gray; /* For IE 6 - 9 */
-webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
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"); /* Firefox 10+, Firefox on Android */
}

img.grayscale:hover{
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}

希望这是非常小的事情。

Answer 1

尝试在 html 过滤器 svg 的某处放置:

<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>

然后在您的 CSS 中使用过滤器 ID:

filter: url('#grayscale');