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 不（当前）兼容在 HTML 元素上通过CSS使用clip-path（请参阅{{3} }）。 clip-path目前仅是HTML的候选推荐，但尚未包含在规范中（can-i-use）。

但是，您可以在另一个SVG元素上使用剪辑路径作为SVG属性（例如，如果您在http://www.w3.org/TR/css-masking-1/上加载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>

示例小提琴（带有一些额外帮助者）：clipping and masking in SVG

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

使用IE 9和10浏览器模式在IE 10中测试（并在Chrome中测试）。可能不会在8及以下工作。

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

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

剪辑路径SVG多边形Internet Explorer

1 个答案: