剪辑路径SVG多边形Internet Explorer

Question

这段代码在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>

有什么建议？谢谢。

Answer 1

Internet Explorer（目前）与通过CSS在HTML元素上使用clip-path不兼容（请参阅can-i-use）。 clip-path目前只是HTML的候选推荐，但还没有在规范中（http://www.w3.org/TR/css-masking-1/）。

但是，您可以在另一个SVG元素上使用剪辑路径作为SVG属性（例如，如果您在clipping and masking in SVG上加载MDN页面，它将在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文本元素。

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