clip-path

Ejemplo de la propiedad clip-path

by Nikolay Petrov

HTML

<img src="http://2.bp.blogspot.com/-EMMxQRG7bwc/UUnGmu3Q6WI/AAAAAAAAGck/5w38nkTha-A/s1600/revelar-y.jpg" class="clip-animation" alt="Las Arribes del Duero" />


 <svg width="0" height="0">
<defs>    
<clipPath id="clipping5" clipPathUnits="objectBoundingBox">
<polygon id="lol" points=".9,.1 .8,.8 .2,.7 .1,.2"/>
</clipPath>
     </defs>
    </svg>
<button onclick="window.myFunction()">Click me</button>

CSS

.clip-animation {
    clip-path: url("#clipping5");   
    -webkit-clip-path: url("#clipping5");
}

JavaScript

window.myFunction = function myFunction(){
    //var el = document.getElementById('clipping5').attributes.id = 'clipping4';
    var el = document.getElementById('lol');
	el.attributes.points = ".9,.1 .8,.8 .2,.7 .1,.2";
    debugger;
    var d = document.createElement('div');
    d.innerHTML = '<img id="img1" src="http://2.bp.blogspot.com/-EMMxQRG7bwc/UUnGmu3Q6WI/AAAAAAAAGck/5w38nkTha-A/s1600/revelar-y.jpg" class="clip-animation1" alt="Las Arribes del Duero" />';
    document.body.appendChild(d);
    document.getElementById('img1').setAttribute('clip-path', "url(#clipping5)");
}