svg image experiment

by Richard Hunter

HTML

<div class="container">
    <p>
        It's the end of the world as we know it
        and I feel fine.
    </p>
<svg   
     id='foo'
     viewbox="0 0 150 100"
     width="600"
     height="400"
     preserveAspectRatio="xMidYMin meet"
     >
    <image id="img-1"
           clip-path="url(#hexagonal-mask)"
           class="svg-image"
           width="150"
           height="100"
           x="0"
           y="0"
           xmlns:xlink="http://www.w3.org/1999/xlink"
           xlink:href="http://192.168.1.108:1314/images/home-page-consultant-image.jpg"
           ></image>
    
    <g>
   <clipPath id="hexagonal-mask">
      <polygon points="0,0 75,100 150,100 75,0" />
   </clipPath>
</g>
</svg>
</div>

CSS

p {
    position : absolute;
    margin-top : 100px;
    z-index : -1;
}

.container {
    border : solid 1px black;
  height : 100vh;
    overflow : hidden;
    
}

#img-1 {
    -ms-transform : translateX(-200px);
}
svg {


    width : 100%;
    height : 100%;
    


}

JavaScript

var image = document.querySelector('#img-1');
var foo = document.querySelector('#foo');

foo.addEventListener('click', function () {
    console.log('click');
    var start = 0;
    var end = -40;
    var current = start;
    function move() {

    	current--;
        if(current > end) {
            image.setAttribute('x', current);
        	window.requestAnimationFrame(move);
        }
    }
    window.requestAnimationFrame(move);
    


});