Issue with clip-path on an image in Internet Explorer

Question

I'm trying to apply a clip-path to an image. I want the bottom right corner to be covered by a triangle. I've got this working in Firefox, Chrome and Safari. But I can't seem to get it working in Internet Explorer. Despite searching intensively I don't seem to be able to get a definite answer on the issue on how to implement this for IE. Some sources say do it like this (and I see this working in IE11)... Others say it's not supported. Makes me confused. Maybe someone can help me based on the following code sample of the styles and SVG I use. Thanks in advance!

    .clip {
        -webkit-clip-path: polygon(0 0, 349px 0, 349px 128px, 297px 233px, 0 233px);
        clip-path: url("#clipPolygon");     
    }

    <svg width="349" height="233">
        <clipPath id="clipPolygon">
             <polygon points="0 0, 349 0, 349 128, 297 233, 0 233"></polygon>
        </clipPath>
    </svg>

Answer 1

IE will apply a clip-path to an SVG <image> element. It will not, however apply a clip-path to an HTML <img> element or a background image or anything other non-SVG element.

Safari and Chrome have the same limitation at the moment FWIW but they support -webkit-clip-path which does work on HTML elements, which is why your example works there.

Firefox supports clip-path on non-SVG elements which is why it works there.