JSFiddle - React, Tailwind, and code Playground

by studiotime

HTML

<svg width="100%" height="100%" viewbox="0 0 200 200">
<rect x="20" y="20" width="50" height="50"
      style="fill: #3333cc"
      transform="matrix(1,0,0,1,1,1)"
      id="blueBox"
        />    
</svg>
<button id="boxMover">
Move it
</button>

CSS

svg {
  display: block
}
#boxMover {
  position: absolute;
  left: 20px;
  top: 20px;
  transition: transform .5s ease;
}

JavaScript

$(function(){
	$('#boxMover').click(function(){
  var blueBox = $('#blueBox');
  	if(blueBox.attr('transform')=='matrix(1,0,0,1,1,1)'){
    	blueBox.attr('transform', 'matrix(1,0,0,1,100,30)');
    } else {
    	blueBox.attr('transform', 'matrix(1,0,0,1,1,1)');
    }
  })
})