JSFiddle - React, Tailwind, and code Playground

by longsonr

HTML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width='400' height='400'>
<script><![CDATA[
  function details(evt) {
    var letters='Move mouse over letters...';
    var pathLetters='ABCDEFGHIJKLMNOPQRSTUVWXYZ';

    var svgdoc=evt.target.ownerDocument;
    var xm=evt.clientX;
    var ym=evt.clientY;
    var text=svgdoc.getElementById('text');
    var d=text.getStartPositionOfChar(1);
    d.x=xm;
    d.y=ym;
    var p=text.getCharNumAtPosition(d);
    if (p >= 0) {
      var f=text.getExtentOfChar(p);
      var node=document.createTextNode('You are on character '+letters.substring(p,p+1));
      var letter=svgdoc.getElementById('letter');
      letter.replaceChild(node,letter.firstChild);
      var outline=svgdoc.getElementById('outline');
      outline.setAttribute('x',f.x);
      outline.setAttribute('y',f.y);
      outline.setAttribute('width',f.width);
      outline.setAttribute('height',f.height)
    }
    var textPath=svgdoc.getElementById('textPath');
    p=textPath.getCharNumAtPosition(d);
    if (p >= 0) {
      var f=textPath.getExtentOfChar(p);
      var node=document.createTextNode('You are on character '+pathLetters.substring(p,p+1));
      var letter=svgdoc.getElementById('letter');
      letter.replaceChild(node,letter.firstChild);
      var outline=svgdoc.getElementById('outline');
      outline.setAttribute('x',f.x);
      outline.setAttribute('y',f.y);
      outline.setAttribute('width',f.width);
      outline.setAttribute('height',f.height)
    }
  }
  function zero(evt)
  {
    var svgdoc=evt.target.ownerDocument;
    var outline=svgdoc.getElementById('outline');
    outline.setAttribute('x',0);
    outline.setAttribute('y',0);
    outline.setAttribute('width',0);
    outline.setAttribute('height',0);
    var letter=svgdoc.getElementById('letter');
    node=document.createTextNode('You are on character ');
    letter.replaceChild(node,letter.firstChild);
  }
]]></script>
  <defs>
      <path id="s3" d="M...