Klip yolu Firefox, IE veya Edge için çalışmıyor

Question

Bazı içeriğe sahip resimler görüntülemek için bir karusel kullanıyorum. Resmi göstermek için klip yolunu kullanıyorum. Chrome'da mükemmel bir şekilde gösterilir, ancak IE, Edge veya Firefox'ta çalışmaz.

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

Ben resim URL'sini ve bir komut dosyası aracılığıyla feed'imin URL'den içeriğini alıyorum. Bu yüzden, yalnızca komut dosyası aracılığıyla ayrıntıları bağlarım.

Answer 1

Görüntünüzle birlikte SVG'yi desen olarak ve clip-path ürününü points olarak düşünün.

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

Ayrıca SVG içine dinamik olarak yüklenen görüntü "dönüştürmek" için bazı komut dosyası kullanmak mümkündür

. Örneğin:

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

Şu klip yolu tam tarayıcı desteği yok. Gömülü veya öğeleri nesne varsa kullanarak

o notlarda gösterdiği gibi https://caniuse.com/#search=clip-path

, SVG ... desteklenir: En fazla bilgi. Bkz: https://caniuse.com/#feat=svg

Answer 3

kenarında olduğu gibi safari ve moz verdiği destekten ötürü -webkit-clip-path: polygon(6% 4%, 94% 11%, 94% 91%, 5% 92%); eklemek hala desteklenmeyen onun