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)
const 
console.log("pt",pt)