JSFiddle - React, Tailwind, and code Playground

by maxell4o

HTML

<svg id="svg" width='635' viewBox="0 0 800 310">
  <g id="pan">
    <rect width="100" height="100" x='0' y='0' class="inner"/>
    <rect width="100" height="100" x='105' y='0' class="inner"/>
    <rect width="100" height="100" x='210' y='0' class="inner"/>
    <rect width="100" height="100" x='315' y='0' class="inner"/>
    <rect width="100" height="100" x='420' y='0' class="inner"/>
    <rect width="100" height="100" x='525' y='0' class="inner"/>
    <rect width="100" height="100" x='630' y='0' class="inner"/>
    <rect width="100" height="100" x='735' y='0' class="inner"/>
    <rect width="100" height="100" x='840' y='0' class="inner"/>
    <rect width="100" height="100" x='945' y='0' class="inner"/>
    <rect width="100" height="100" x='1050' y='0' class="inner"/>
    <rect width="100" height="100" x='0' y='105' class="inner"/>
    <rect width="100" height="100" x='105' y='105' class="inner"/>
    <rect width="100" height="100" x='210' y='105' class="inner"/>
    <rect width="100" height="100" x='315' y='105' class="inner"/>
    <rect width="100" height="100" x='420' y='105' class="inner"/>
    <rect width="100" height="100" x='525' y='105' class="inner"/>
    <rect width="100" height="100" x='630' y='105' class="inner"/>
    <rect width="100" height="100" x='735' y='105' class="inner"/>
    <rect width="100" height="100" x='840' y='105' class="inner"/>
    <rect width="100" height="100" x='945' y='105' class="inner"/>
    <rect width="100" height="100" x='1050' y='105' class="inner"/>
    <rect width="100" height="100" x='0' y='210' class="inner"/>
    <rect width="100" height="100" x='105' y='210' class="inner"/>
    <rect width="100" height="100" x='210' y='210' class="inner"/>
    <rect width="100" height="100" x='315' y='210' class="inner"/>
    <rect width="100" height="100" x='420' y='210' class="inner"/>
    <rect width="100" height="100" x='525' y='210' class="inner"/>
    <rect width="100" height="100" x='630' y='210' class="inner"/>
    <rect...

CSS

body {
  margin: 0;
}
#svg {
  box-shadow: 0 0 10px 0 #555;
}
#pan {
  /* transform: matrix(1, 0, 0, 1, 0, 0); */
}

.inner{
  fill: #ccc;
}

JavaScript

let svg = document.getElementById('svg');
let pan = document.getElementById('pan');
let scale = 1;
let x = 0;
let y = 0;

svg.addEventListener('click', e => {
	let viewBox = svg.viewBox.baseVal;
  let ratio = 1;
  scale += 0.1;
  if (svg.clientWidth < viewBox.width){
  	ratio = viewBox.width / svg.clientWidth;
  }
  x = x - (((ratio * e.offsetX) - x) * (scale - 1));
  y = y - (((ratio * e.offsetY) - y) * (scale - 1));
  //x += -(ratio * e.offsetX);
  //y += -(ratio * e.offsetY);
  
  console.log(x, y)
  
	pan.setAttributeNS(null, 'transform', `matrix(${scale}, ${0}, ${0}, ${scale}, ${x}, ${y})`)
})

console.log(svg.getCTM());