2012-12-07 10 views
5

मैं 50% ग्रे स्केल फ़िल्टर से एक छवि को होवर पर फ़िल्टर रहित स्थिति में बदलने का प्रयास कर रहा हूं।फ़ायरफ़ॉक्स में एसवीजी फ़िल्टर संक्रमण

हालांकि संक्रमण फ़ायरफ़ॉक्स में काम नहीं करता है। क्या केवल सीएसएस का उपयोग करके फ़ायरफ़ॉक्स में संक्रमण चलाना संभव है?

img { 
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0.5\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */ 
    filter: gray alpha(opacity=50); /* IE6-9 */ 
    -webkit-filter: grayscale(50%); /* Chrome 19+ & Safari 6+ */ 
    -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */ 
    -moz-transition: all .6s ease; 
    -ms-transition: all .6s ease; 
    transition: all .6s ease; 
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */ 
} 
img:hover { 
    filter: none; 
    -webkit-filter: grayscale(0); 
} 
+0

सफारी 5 या उससे नीचे भी काम नहीं करता है। सफारी 5 समर्थन कैसे जोड़ें? – Raptor

उत्तर

3

क्योंकि मानक फ़िल्टर वाक्यविन्यास एक यूआरएल है क्योंकि यह संक्रमण के लिए उपयुक्त नहीं है। गीको को काम करने के लिए Filter Effects विनिर्देश के तहत निर्माणाधीन shorthands भाग को लागू करना होगा।

इस बीच आप एसवीजी एनीमेशन का उपयोग करके ऐसा कर सकते हैं लेकिन केवल सीएसएस के माध्यम से नहीं।

संबंधित मुद्दे