JSFiddle - React, Tailwind, and code Playground

by Jan Marthedal Rasmussen

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.3.0/katex.min.css">
before<svg viewBox="0 -23.23 40 39.43" style="vertical-align: -1.0em; width: 3.32em; height: 3.28em">
<g>
  <text id="num" x="0" y="0" font-family="KaTeX_Main" font-size="16">316</text>
  <rect id="line" x="0" y="-0.25" width="0" height="0.5" />
  <text id="den" class="mi" x="0" y="0" font-family="KaTeX_Main" font-size="16">x</text>
  <text id="sqrt" x="0" y="0" font-family="KaTeX_Size3" font-size="16">√</text>
  <rect id="over" x="0" y="0" width="0" height="0.5" />
</g>
</svg>after

CSS

svg {
    padding: 0;
    margin: 0;
    stroke: none;
    fill: black;
}
.mi {
    font-style: italic;
}

JavaScript

var svgNS = "http://www.w3.org/2000/svg",
    num = document.querySelector('#num'),
    den = document.querySelector('#den'),
    line = document.querySelector('#line'),
    over = document.querySelector('#over'),
    numbox = num.getBBox(),
    denbox = den.getBBox(),
    numasc = numbox.height + numbox.y,
    dendesc = -denbox.y,
    xofs = 16;

line.setAttribute('x', xofs);
line.setAttribute('width', numbox.width);
num.setAttribute('x', xofs);
num.setAttribute('y', -0.25 - numasc);
den.setAttribute('x', xofs + (numbox.width - denbox.width)/2);
den.setAttribute('y', 0.25 + dendesc);
over.setAttribute('x', xofs);
over.setAttribute('y', -22.98-0.25);
over.setAttribute('width', numbox.width);

console.log(numasc, dendesc, document.querySelector('g').getBBox());

console.log(document.querySelector('#sqrt').getBBox());

//setRect(num);
//setRect(den);

/*function setRect(el) {
    var bb=el.getBBox(),
        r=document.createElementNS(svgNS, 'rect');
    console.log(bb);
    r.setAttribute('x', bb.x);
    r.setAttribute('y', bb.y);
    r.setAttribute('width', bb.width);
    r.setAttribute('height', bb.height);
    r.setAttribute('stroke', 'green');
    r.setAttribute('stroke-width', '0.1');
    r.setAttribute('fill', 'none');
    document.querySelector('svg').appendChild(r);
}*/