再现剪辑路径:Microsoft Edge带有svg的多边形

时间:2019-11-01 16:02:05

标签: svg polygon microsoft-edge clip

On top is wanted result, below is svg result

由于Microsoft Edge无法识别属性clip-path: polygon,因此我读到某处应该使用SVG图像来完成此操作。

这是我的原始代码:

-webkit-clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);

这是我尝试使其与Edge一起使用:

clip-path: url('#myclippath');

以及div旁边的svg:

<svg width="0" height="0">
  <clipPath id="myclippath" clipPathUnits="objectBoundingBox">
    <polygon points="0, 0, 1.0, 0, 0.75, 1.0, 0, 1.0"/>
  </clipPath>
</svg>	

问题是SVG形状应用于背景图像,而不是div本身。这使它变得毫无用处。

可以将SVG形状应用于div吗?如果没有,是否有jQuery替代品(以为我宁愿坚持使用CSS)?

0 个答案:

没有答案