IE10에서 CSS 마스킹

Question

이 코드는 배경 이미지를 CSS 마스크 아래에 표시합니다.

.test-splash { 
height: 1000px; 
width: 1000px; 
display: block; 
-moz-transform: translate(-50%, -50%); 
-ms-transform: translate(-50%, -50%); 
-o-transform: translate(-50%, -50%); 
-webkit-transform: translate(-50%, -50%); 
transform: translate(11%, -12%); 
-webkit-mask: url("http://www.clipartbest.com/cliparts/aTq/9Er/aTq9ErbTM.svg"); 
mask: url("http://www.clipartbest.com/cliparts/aTq/9Er/aTq9ErbTM.svg"); 
-webkit-mask-image: url("http://www.clipartbest.com/cliparts/aTq/9Er/aTq9ErbTM.svg"); 
-webkit-mask-repeat: no-repeat; 
-webkit-mask-position: center; 
background-image: url(http://wemedia.com/wp-content/uploads/2008/12/istock_dandelionlarge.jpg); 
background-position: 0 0; 
background-position-x: center; 
background-repeat: no-repeat; 
z-index: 28; 
} 

그리고 HTML 여기

<div class="test-splash"></div> 

는 jsbin 내가 그것은 웹킷과 모질라 브라우저에서 잘 작동하고

http://jsbin.com/lunoxo/1/edit?html,css,output

달성 할 수 있지만 IE (10) 무엇을 보여주고 무엇 내가 그 브라우저에서 작동하도록해야합니까?

Answer 1

데모 - http://jsfiddle.net/2wtbrsdq/svg

<svg width="360" height="233" version="1.2"> 
 
    <defs> 
 
    <mask id="svgmask2"> 
 
     <image width="100%" height="100%" xlink:href="http://s12.postimg.org/pzhdxcxb1/squirrel.png" /> 
 
    </mask> 
 
    </defs> 
 
    <image mask="url(#svgmask2)" width="100%" height="100%" xlink:href="http://wemedia.com/wp-content/uploads/2008/12/istock_dandelionlarge.jpg" /> 
 
</svg>