Clip-path SVG polygon Internet Explorer - html

Question

This code does not work in IE, I need to use it because I have to make an arrow that follows a point on the map.
div {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
right: 0px;
background: red;
clip-path: url(#cliparrow);
-webkit-clip-path: polygon(777px 285px, 0px 303px, 777px 315px);
}
svg {
width: 0;
height: 0;
float: left;
position: absolute;
}
<div></div>
<svg height="0" width="0">
<defs>
<clipPath id="cliparrow">
<polygon points="777,285 0,303 777,315" ></polygon>
</clipPath>
</defs>
</svg>
Any suggestions? Thanks.

Answer 1

Internet Explorer is not (currently) compatible with using clip-path via CSS on HTML elements (see can-i-use). clip-path is currently only a candidate recommendation for HTML and not yet in the spec (http://www.w3.org/TR/css-masking-1/).
You may, however, use clip-path as an SVG attribute on another SVG element (for example, if you load the MDN page on clipping and masking in SVG, it will work in IE).
If all you need to do is embed a colored shape, and not transform HTML content per se (e.g. apply clipping against HTML text, multiple elements, etc), you could even more simply just use an appropriately shaped SVG element (directly embedded in an otherwise transparent div if needed) instead of trying to clip an HTML element. This also removes the need for the browser specific webkit prefix.
<div>
<svg width="700px" height="700px" xmlns="http://www.w3.org/2000/svg">
<polygon id="arrow" points="777,285 0,303 777,315" ></polygon>
</svg>
</div>
example fiddle (with some extra helpers): http://jsfiddle.net/taswyn/cv6m76m7/
(You'll obviously need to set height and width appropriately, this was just a quick example using your shape. Note the use of SVG CSS to apply the color on the arrow, which this method allows)
Tested in IE 10 using IE 9 and 10 browser modes (and tested in Chrome). Probably won't work in 8 and below.
If you do need to clip against text, you'll need to use SVG text instead of HTML text elements.
Aside: If all you need to do is clip in a rectangle, you could temporarily use clip CSS, which is cross-browser compatible but deprecated, until the masking module hits recommendation status and clip-path becomes available for use on HTML as a W3C standard. (obviously this doesn't apply to your situation, but it may help someone else)