画像のグレースケールへ（SVG）問題

Question

がホバーに正常に戻ってグレースケールとする画像を変換しようとして - Convert an image to grayscale in HTML/CSS

を見てすべてがFirefoxでしかし、SVG方法、通常のフィルタの使用のためにIEで正常に動作してあまりうまくいきません。私のページはすべてサイトのルートにあり、スタイルシートは/SiteStyles/Styles.cssにあり、私は.homeCaseStudyImageと呼んでいます。img {filter：url（filters.svg＃grayscale）;

My filters.svgも/ SiteStylesディレクトリ内にあります。これは次のようになります。

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" baseProfile="full" 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> 

私はそれが私のフォルダ構造またはおそらくSVGとは何かを参照していないのいずれかで行うに何かを推測しているので、これは他の人のために働く知っていますか？

すべてのヘルプは

Answer 1

は、サーバーがSVGのMIMEタイプimage/svg+xmlを使用して.svgファイルを提供するように設定されていることを確認し理解されよう。 Firefoxは、正しいMIMEタイプで提供されていないSVGファイルを無視します。