JSFiddle - React, Tailwind, and code Playground

by kzima

HTML

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

CSS

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

CoffeeScript

svg = document.getElementById('svg')
rec = document.getElementById('rec')
point = sv.createSVGPoint()
# This is the top-left relative to the SVG element
ctm = rec.getCTM()
console.log point.matrixTransform(ctm)
# This is the top-left relative to the document
ctm = rec.getScreenCTM()
console.log point.matrixTransform(ctm)

#
console.log()