JSFiddle - React, Tailwind, and code Playground

by Valerie Ren

HTML

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="170mm"
   height="170mm"
   viewBox="0 0 600px 600px">
    <path
     style="fill:#00b400;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.93257946px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
     d="m 307.99025,332.70033 215.2088,-39.40415 -5.50808,198.59689 -190.81585,-1.18212 z"
     id="undeveloped"
     inkscape:connector-curvature="0" />
  <path
  style="fill:#ff5a00;fill-opacity:0.5;fill-rule:evenodd;stroke:#000000;stroke-width:0.93257946px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
     d="m 307.99025,332.70033 215.2088,-39.40415 -5.50808,198.59689 -190.81585,-1.18212 z"
     id="developed"
  />
  
</svg>

JavaScript

$(document).ready(function () {
		var offsetLeftO = $("#undeveloped:first").offset().left;
		var offsetTopO = $("#undeveloped:first").offset().top;
alert("offsetLeftO: "+offsetLeftO+" \noffsetTopO: "+offsetTopO);

		$("#developed").css({'transform':'scale(0.7)'});

    		var offsetLeft = $("#developed:first").offset().left;
    var offsetTop = $("#developed:first").offset().top;
alert("offsetLeft: "+offsetLeft+" \noffsetTop: "+offsetTop);
        
    var offsetY =  offsetLeftO - offsetLeft;
    var offsetX =  offsetTopO - offsetTop;
alert("offsetX: "+offsetX+" \noffsetY: "+offsetY);
  
	  $("#developed").css({'transform': 'translate('+offsetX+'px, '+offsetY+'px)'+'scale(0.7)'})
    var moveX = $("#developed:first").offset().left-offsetLeftO;
    var moveY = $("#developed:first").offset().top-offsetTopO;
alert("offsetLeftO: "+offsetLeftO+" \noffsetTopO: "+offsetTopO+"\n"+$("#developed:first").offset().left+"\n"+$("#developed:first").offset().top+"\nmoveX: "+moveX+" \nmoveY: "+moveY);
 	  $("#developed").css({'transform': 'translate('+offsetX+'px, '+offsetY+'px)'+'scale(0.7)'+'translate('+(moveY)+'px, '+(moveX)+'px)'});   
});