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

Question

我使用旋转木马显示带有某些内容的图像。用于显示我正在使用剪辑路径的图像。它在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内容。所以我只通过脚本绑定细节。

Answer 1

考虑使用SVG和图像作为模式，并使用clip-path作为points。

<svg height="186px" width="300px"> 
 
    <defs> 
 
    <pattern id="pattern" height="100%" width="100%" patternUnits="userSpaceOnUse" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice"> 
 
     <image height="1" width="1" 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 height="0" width="0"> 
 
    <defs> 
 
    <pattern id="pattern" height="100%" width="100%" patternUnits="userSpaceOnUse" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice"> 
 
     <image height="1" width="1" xlink:href="" preserveAspectRatio="xMidYMid meet"></image> 
 
    </pattern> 
 
    </defs> 
 
    <polygon fill="url(#pattern)"></polygon> 
 
</svg> 
 

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

Answer 2

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

，因为它显示在附注中，SVG支持......如果采用嵌入式或对象元素。请参阅： https://caniuse.com/#feat=svg

Answer 3

添加-webkit-clip-path: polygon(6% 4%, 94% 11%, 94% 91%, 5% 92%);其在Safari和万盎司的支持，在其边缘仍不支持