<div class="svg left">
  <img class="svg__image" height="1000px" width="1000px" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/box.svg" alt="squares"/>
</div>

<p>Click the SVG above to reposition it by its <a href="https://css-tricks.com/almanac/properties/o/object-position/">object-position</a></p>

.svg {
  margin: 0 auto;
  height: 400px;
  width: 400px;
}

.svg__image {
  display: inline-block;
  transition: all .3s ease;
  width: 400px;
  height: 400px;
  object-fit: none;
  cursor: pointer;
  
  .left & {
    object-position: 0 0;
  }
  
  .middle & {
    object-position: 50% 50%;
  }
  
  .right & {
    object-position: 100% 100%;
  }
}

/////////////////////////////////////
////////////////////////////////////

*{ 
box-sizing: border-box;
}

body {
 padding: 30px;
 font-family: 'Source Code Pro', Monaco;
}

h1 {
  border-bottom: 4px solid #ddd;
  padding-bottom: 5px;
  margin-bottom: 30px;
  font-size: 18px;
}

a {
  color: #E06363;
}

p {
  text-align: center;
  margin-top: 40px;
}

document.addEventListener("DOMContentLoaded", function() {
var svg = document.querySelector('.svg'),
    pos = "left";

  svg.addEventListener('click', function(){
    switch(pos) {
      case "left":
        svg.classList.remove('left');
        svg.classList.add('middle');
        pos = "middle";
        break;
      case "middle":
        svg.classList.remove('middle');
        svg.classList.add('right');
        pos = "right";
        break;
      case "right": 
        svg.classList.remove('right');
        svg.classList.add('left');
        pos = "left";
    }
  }, false);
});