剪切路径 SVG 多边形 Internet Explorer

该代码在 IE 中不起作用，我需要使用它，因为我必须制作一个跟随地图上的点的箭头。

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>

有什么建议么？谢谢。

Internet Explorer 是not（现在）兼容的与使用clip-path通过CSSHTML元素（参见我可以用吗). clip-path目前只是 HTML 的候选推荐，尚未包含在规范中（http://www.w3.org/TR/css-masking-1/).

但是，您可以使用 Clip-path 作为另一个 SVG 元素上的 SVG 属性（例如，如果您将 MDN 页面加载到SVG 中的剪切和遮罩，它将在 IE 中运行）。

如果您需要做的只是嵌入一个彩色形状，而不是转换 HTML 内容本身（例如，对 HTML 文本、多个元素等应用剪切），您甚至可以更简单地使用形状适当的 SVG 元素（直接嵌入到否则透明 div（如果需要）而不是尝试剪辑 HTML 元素。这也消除了对浏览器特定 webkit 前缀的需要。

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

小提琴示例（带有一些额外的助手）：http://jsfiddle.net/taswyn/cv6m76m7/

（显然，您需要适当地设置高度和宽度，这只是使用您的形状的一个简单示例。请注意，使用 SVG CSS 在箭头上应用颜色，此方法允许）

使用 IE 9 和 10 浏览器模式在 IE 10 中进行测试（并在 Chrome 中进行测试）。 8 及以下版本可能无法使用。

如果确实需要剪切文本，则需要使用 SVG 文本而不是 HTML 文本元素。

旁白：如果您需要做的只是剪辑一个矩形，您可以暂时使用clipCSS，跨浏览器兼容，但已弃用，直到屏蔽模块达到推荐状态并且剪辑路径可作为 W3C 标准在 HTML 上使用。 （显然这不适用于您的情况，但可能对其他人有帮助）