Css-маскирование в IE10

У меня есть этот код, который создает фоновое изображение под маской 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

Вот jsbin, показывающий, чего я хочу достичь.

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

Он отлично работает в браузерах webkit и mozilla, но не в IE 10. Что мне нужно сделать, чтобы он работал в этом браузере?

1 ответ

demo - http://jsfiddle.net/2wtbrsdq/

попробуйте использовать svg

<svg version="1.2">
 <defs>
 <mask id="svgmask2">
 
 </mask>
 </defs>
 
</svg>

licensed under cc by-sa 3.0 with attribution.