CSS-Graustufenfilter funktioniert plötzlich nicht mehr

Question

Kürzlich hörte der Grayscacle-Effekt auf meiner Website (DezinoGraphist.com) plötzlich auf zu arbeiten. Der CSS-Code fügte allen Elementen eines bestimmten Abschnitts (Assoziation) einen Graustufeneffekt hinzu, bis Sie über ihnen schwebten, dann wurden die Elemente regelmäßig gefärbt.

Es funktionierte perfekt für eine ganze Weile, aber jetzt hat plötzlich aufgehört zu arbeiten. Ich habe nichts geändert. Folgendes ist der CSS-Code als Referenz:

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"); 
} 

Hoffe, das ist etwas sehr geringes.

Answer 1

Versuchen irgendwo in html-Filter svg setzen:

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

Und dann in Ihrem CSS verwenden nur Filter-ID:

filter: url('#grayscale'); 

Answer 2

Dank Devian. Putting SVG-Filter hat den Trick. Es hat funktioniert :)