Đường dẫn clip không hoạt động đối với Firefox, IE hoặc Edge

Tôi đang sử dụng băng chuyền để hiển thị hình ảnh với một số nội dung. Để hiển thị hình ảnh tôi đang sử dụng đường dẫn clip. Nó hiển thị hoàn hảo trong Chrome, nhưng nó không hoạt động trong IE, Edge hoặc Firefox.Đường dẫn clip không hoạt động đối với Firefox, IE hoặc Edge

.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>

Tôi nhận được URL hình ảnh và nội dung của nó từ URL feed của tôi qua một kịch bản. Vì vậy, tôi ràng buộc chi tiết thông qua kịch bản chỉ.

Nguồn

2017-09-28 chozha rajan

IE và cạnh không hỗ trợ clip-đường –

làm thế nào tôi có thể khắc phục điều này ?? –

Có một polyfill nhưng tôi đã không cá nhân sử dụng nó vì vậy tôi không thể tư vấn https://github.com/AlfonsoFilho/ClipPath –

Cân nhắc sử dụng SVG với hình ảnh của bạn làm mẫu và clip-path là 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>

Có thể cũng sử dụng một số kịch bản để "chuyển đổi" một hình ảnh tự động nạp vào SVG. Ví dụ:

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>

Nguồn

2018-01-17 13:23:18 Sam