I am using a carousel for displaying images with some content. For showing the image I am using clip path. It shows perfectly in Chrome, but it does not work in IE, Edge, or 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>I am getting the image URL and its content from my feed URL via a script. So I am binding details through the script only.
3 Answers
Answers 1
Consider using SVG with your image as a pattern and your clip-path as 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>It is possible also to use some script to "convert" a dynamically loaded image into SVG. For example:
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>Answers 2
Currently clip-path does not have full browser-support. More info at: https://caniuse.com/#search=clip-path
As it shows in the notes, SVG is supported... if using embedded or object elements. See: https://caniuse.com/#feat=svg
Answers 3
add -webkit-clip-path: polygon(6% 4%, 94% 11%, 94% 91%, 5% 92%); for its support in safari and moz as in edge its still not supported
0 comments:
Post a Comment