JSFiddle - React, Tailwind, and code Playground

by fschwiet

HTML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:lang="es" id="2d98a6aeade943e0a773f4447f0c8477-0" class="displacy" width="4100" height="587.0" direction="ltr" style="max-width: none; height: 587.0px; color: #000000; background: #ffffff; font-family: Arial; direction: ltr">
<text class="displacy-token" fill="currentColor" text-anchor="middle" y="497.0">
    <tspan class="displacy-word" fill="currentColor" x="50">Y</tspan>
    <tspan class="displacy-lemma" dy="2em" fill="currentColor" x="50">Y</tspan>
    <tspan class="displacy-tag" dy="2em" fill="currentColor" x="50">CCONJ</tspan>
</text>

<text class="displacy-token" fill="currentColor" text-anchor="middle" y="497.0">
    <tspan class="displacy-word" fill="currentColor" x="200">para</tspan>
    <tspan class="displacy-lemma" dy="2em" fill="currentColor" x="200">parir</tspan>
    <tspan class="displacy-tag" dy="2em" fill="currentColor" x="200">ADP__AdpType=Prep</tspan>
</text>

<text class="displacy-token" fill="currentColor" text-anchor="middle" y="497.0">
    <tspan class="displacy-word" fill="currentColor" x="350">colmo</tspan>
    <tspan class="displacy-lemma" dy="2em" fill="currentColor" x="350">colmar</tspan>
    <tspan class="displacy-tag" dy="2em" fill="currentColor" x="350">NOUN</tspan>
</text>

<text class="displacy-token" fill="currentColor" text-anchor="middle" y="497.0">
    <tspan class="displacy-word" fill="currentColor" x="500">ese</tspan>
    <tspan class="displacy-lemma" dy="2em" fill="currentColor" x="500">ese</tspan>
    <tspan class="displacy-tag" dy="2em" fill="currentColor" x="500">DET__Gender=Masc|Number=Sing|PronType=Dem</tspan>
</text>

<text class="displacy-token" fill="currentColor" text-anchor="middle" y="497.0">
    <tspan class="displacy-word" fill="currentColor" x="650">proceso</tspan>
    <tspan class="displacy-lemma" dy="2em" fill="currentColor" x="650">procesar</tspan>
    <tspan class="displacy-tag" dy="2em" fill="currentColor"...

JavaScript

var tagNodes = document.querySelectorAll("tspan.displacy-tag");

var firstOffset = tagNodes[0].getAttribute("x");
var secondOffset = tagNodes[1].getAttribute("x");
var firstWidth = secondOffset - firstOffset;

var children = [];

for(var i = 0; i < tagNodes.length; i++) {
  var child = {
  	text: tagNodes[i].innerHTML,
    position: (tagNodes[i].getAttribute("x")-firstOffset) / firstWidth
  };
  console.log(child)
  var childElement = document.createElement("text");
  childElement.setAttribute("text", "hi")
  children.push(childElement)
}

for(var i = 0; i < children.length; i++) {
	document.querySelector("svg").appendChild(children[i])
}