IE10의 HTML IMG의 SVG 필터

Question

Chrome 및 Firefox에서 작동하는이 필터가 있지만 IE

에서 작동 할 수 없습니다.

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

IE10은 SVG 필터를 지원해야하므로 잘못된 것입니까?

Answer 1

IE는 현재 HTML 문서 또는 "Nofollow"> CSS 필터 효과 그것은 HTML 문서 내부의 SVG 문서 또는 SVG 조각의 SVG 필터 만 지원합니다. IE에서 작동하려면 HTML 문서에서 SVG 문서로 이미지를 포함하거나 SVG 조각 내에 이미지를 포함하거나 HTML 페이지에서 대신 해당 이미지를 SVG 파일에 포함시켜야합니다. .

후자의 경우 다음과 같이 이미지 주위에 SVG 래퍼를 만들 수 있습니다.

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

.

이 이미지 그런 다음 HTML에서 SVG 파일에 링크해야합니다.

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

.

img 요소로 연결하기보다는 HTML 파일에 SVG를 직접 포함시킬 수 있습니다. 이 JSFiddle 데모 에서 해당 방식을 볼 수 있습니다. 필요한 SVG 코드는 정확히 동일합니다.

IE5.5-IE9 Microsoft의 자체 독점적 인 필터 그러나 이것들은 IE10에서 떨어졌습니다.