Coordinate Conversion

Converting coordinates from html to svg

HTML

<div class="svg-wrap">
  <svg viewBox="0 0 120 120">
    <rect x="10" y="10" width="100" height="100" />
  </svg>
  <div class="scale"></div>
</div>

CSS

div.svg-wrap {
  box-sizing: border-box;
  background-color: #ababab;
  position: relative;
  width: 50%;
}

div.svg-wrap svg {
  display: block;
  box-sizing: border-box;
  background-color: #efefef;
}

div.svg-wrap div.scale {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 10px;
  height: 10px;
  background-color: #ffff00;
}

Babel + JSX

/**
	*@see https://www.w3.org/TR/SVG/types.html#InterfaceSVGLocatable
  */

let wrap = document.querySelector('div.svg-wrap'),
		svg  = wrap.querySelector('svg');
    
 function point (x, y) {
 	let p = svg.createSVGPoint();
  		p.x = x;
      p.y = y;
   return p;
 }
 
 function svg2html (point, target) {
 	let ctm = target.getCTM();
  return point.matrixTransform(ctm);
 }
 
 function html2svg (point, target) {
 	let ctm = target.getCTM().inverse();
  return point.matrixTransform(ctm);
 }
 
 (function (scale, rect) {
 	let p1SVG = point(
  	parseFloat(rect.getAttribute('x')),
    parseFloat(rect.getAttribute('y'))),
    p1HTML = svg2html(p1SVG, rect);
  
  scale.style.left = p1HTML.x + 'px';
  scale.style.top = p1HTML.y + 'px';
 	
 })(
 	wrap.querySelector('div.scale'),
  svg.querySelector('rect'));