剪辑路径不适用于 Firefox、IE 或 Edge

Posted 2023-03-06

【中文标题】剪辑路径不适用于 Firefox、IE 或 Edge

【英文标题】：Clip path is not working for Firefox, IE, or Edge

【发布时间】：2018-03-09 20:31:02

【问题描述】：

我正在使用轮播来显示带有一些内容的图像。为了显示我正在使用剪辑路径的图像。它在 Chrome 中完美显示，但在 IE、Edge 或 Firefox 中不起作用。

.carousel-inner>.item>a>img,
.carousel-inner>.item>img,
.img-responsive,
.thumbnail a>img,
.thumbnail>img 
  display: inline-block;
  max-width: 100%;
  height: auto;


body 
  background-image: url('../../Images/Plain-BG.PNG');
  background-size: cover;
  background-repeat: no-repeat;
  font-family: Kamban !important;


footer 
  background-image: url(../../Images/DT-Logo.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
  position: absolute;
  right: 10%;
  top: 85%;
  width: 100%;
  padding-top: 5%;


.news-img 
  width: 42.5%;
  margin-top: 13%;
  clip-path: polygon(6% 4%, 94% 11%, 94% 91%, 5% 92%);
  margin-left: 8.5%;


.title 
  margin: 0px;
  width: 40%;
  position: absolute;
  top: 43%;
  height: auto;
  left: 57%;
  color: #fff;
  word-break: break-word;


.carousel-inner>.item>a>img,
.carousel-inner>.item>img,
.img-responsive,
.thumbnail a>img,
.thumbnail>img 
  height: auto !important;


.title p 
  line-height: 1.7em;
  font-size: 2.5em;
  text-align: center;
  word-break: break-word;


header 
  background-image: url(../../Images/Mukkiya-Seithigal.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
  position: absolute;
  top: 18%;
  right: 4%;
  width: 100%;
  padding-top: 5%;

<div class="Maindiv">
  <header></header>
  <article>
    <div id='carousel-container'>
      <div class="carousel slide" data-ride="carousel">
        <div class="wholediv carousel-inner">
        </div>
      </div>
    </div>
  </article>
  <footer></footer>
</div>

我通过脚本从我的提要 URL 获取图像 URL 及其内容。所以我只通过脚本绑定细节。

【问题讨论】：

IE和edge不支持clip-path

我该如何克服这个问题？？

有一个polyfill，但我没有亲自使用过，所以我无法建议github.com/AlfonsoFilho/ClipPath

【参考方案1】：

考虑将 SVG 与您的图像一起用作模式，并将您的 clip-path 用作 points。

<svg  >
  <defs>
    <pattern id="pattern"   patternUnits="userSpaceOnUse" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice">
      <image   xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Crossing_the_River_Styx.jpg/300px-Crossing_the_River_Styx.jpg"  preserveAspectRatio="xMidYMid meet"></image>
    </pattern>
  </defs>
  <polygon points="18 7, 282 20, 282 150, 15 171" fill="url(#pattern)"></polygon>
</svg>

也可以使用一些脚本将动态加载的图像“转换”为 SVG。例如：

function clip() 
  let img = document.querySelector('img');

  let svg = document.querySelector('svg');
  svg.setAttribute('height', img.clientHeight + 'px');
  svg.setAttribute('width', img.clientWidth + 'px');
  svg.querySelector('pattern image').setAttribute('xlink:href', img.src);

  let pointsRaw = img.getAttribute('data-points').split(/,\s/);
  let points = '';
  for (let i = 0; i < pointsRaw.length; i++) 
    let coord = pointsRaw[i].replace(/%/g, '').split(' ');
    let x = img.clientWidth * coord[0] / 100;
    let y = img.clientHeight * coord[1] / 100;
    points += Math.round(x) + ' ' + Math.round(y) + ' ';
  
  svg.querySelector('polygon').setAttribute('points', points);

  img.style.display = 'none';
  document.querySelector('button').style.display = 'none';

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Crossing_the_River_Styx.jpg/300px-Crossing_the_River_Styx.jpg" data-points="6% 4%, 94% 11%, 94% 80%, 5% 92%">

<svg  >
  <defs>
    <pattern id="pattern"   patternUnits="userSpaceOnUse" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice">
      <image   xlink:href="" preserveAspectRatio="xMidYMid meet"></image>
    </pattern>
  </defs>
  <polygon fill="url(#pattern)"></polygon>
</svg>

<button onclick="clip()">Clip</button>

【讨论】：

我们可以用 而不是 使用这个方法吗？

【参考方案2】：

目前clip-path 没有完整的浏览器支持。更多信息在： https://caniuse.com/#search=clip-path

正如注释中所示，支持 SVG...如果使用嵌入或对象元素。看： https://caniuse.com/#feat=svg