Filtro SVG em HTML img no IE10

Question

Eu tenho esse filtro que funciona no Chrome e no Firefox, mas não consigo fazê-lo funcionar no IE

http://codepen.io/anon/pen/lwpbo

O IE10 deve suportar filtros SVG, então o que há de errado?

Answer 1

Atualmente, o IE não oferece suporte a filtros SVG em documentos HTML ou Efeitos de filtro CSS.Ele suporta apenas filtros SVG em documentos SVG ou fragmentos SVG em documentos HTML.Se quiser que funcione no IE, você precisará convertê-lo de um documento HTML para um documento SVG, incluir a imagem dentro de um fragmento SVG ou incluir a imagem em um arquivo SVG e vincular a ele na página HTML .

Para este último, você pode criar um wrapper SVG ao redor da imagem, como mostrado:

<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="300"> 

    <filter id="greyscale">
        <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>
    <image x="0" y="0" xlink:href="Lenna.jpg " filter="url(#greyscale)" width="300" height="300"/>
</svg>

Você pode ver isso em ação com esta imagem

Então, a partir do HTML, você precisa vincular ao arquivo SVG:

<img src="lenna.svg" alt="Lena Söderberg desaturated with SVG" />

Se desejar, você pode incluir o SVG acima diretamente no arquivo HTML, em vez de vincular a ele com um img elemento.Você pode ver essa abordagem em esta demonstração jsFiddle.O código SVG necessário é exatamente o mesmo.

IE5.5 – IE9 oferece suporte ao próprio Microsoft filtros proprietários, mas estes foram eliminados no IE10.