JSFiddle - React, Tailwind, and code Playground

by kzima

HTML

<div id="container">
  <svg id="svg" viewbox="0 0 1000 1000">
      <g transform="translate(50,50)">
          <rect id="rect" width="20" height="20" style="fill:black;" />
      </g>
  </svg>
</div>

CSS

#container {
  -webkit-transform: translateX(20px);
          transform: translateX(20px);
}

JavaScript

const container = document.getElementById('container')
const svg = document.getElementById('svg')
const rect = document.getElementById('rect')
const point = svg.createSVGPoint()

const ctm2 = rect.getScreenCTM()
const pt = point.matrixTransform(ctm2)

pt.x =  - e;
pt.y = evt.clientY - f;
    
const pt2 = point.matrixTransform(ctm2)
var tr =
  st.getPropertyValue("-webkit-transform") ||
  st.getPropertyValue("-moz-transform") ||
  st.getPropertyValue("-ms-transform") ||
  st.getPropertyValue("-o-transform") ||
  st.getPropertyValue("transform");
const [a, b, c, d, e, f] = tr
  .replace("matrix(", "")
  .replace(")", "")
  .split(", ");
      
      
      
console.log("pt",pt.x, pt.y)
      
console.log("pt",pt.x - e, pt.y - f)