JSFiddle - React, Tailwind, and code Playground

by Michael Baas

HTML

<svg height="320" width="220">
  <g>
    <rect x="20" y="120" width="79" height="71" transform="translate(20, 120) rotate(NaN) translate(-20, -120)" fill="transparent"></rect><text alignment-baseline="middle" dy="0.7em" x="20" y="120" font-size="11px" fill="rgb(255, 0, 0)" font-style="none" font-weight="0" text-decoration="none" transform="translate(20, 120) rotate(NaN) translate(-20, -120)">
      <tspan x="20" dy="0.7em">RED</tspan>
      <tspan x="20" dy="1em">GREEN</tspan>
      <tspan x="20" dy="1em">BLUE</tspan>
    </text>//
  </g>
  <g>
    <rect x="30" y="140" width="79" height="71" transform="translate(30, 140) rotate(NaN) translate(-30, -140)" fill="transparent"></rect><text alignment-baseline="middle" dy="0.7em" x="30" y="140" font-size="11px" fill="rgb(0, 255, 0)" font-style="none" font-weight="0" text-decoration="none" transform="translate(30, 140) rotate(NaN) translate(-30, -140)">
      <tspan x="30" dy="0.7em">RED</tspan>
      <tspan x="30" dy="1em">GREEN</tspan>
      <tspan x="30" dy="1em">BLUE</tspan>
    </text>//
  </g>
  <g>
    <rect x="40" y="160" width="79" height="71" transform="translate(40, 160) rotate(NaN) translate(-40, -160)" fill="transparent"></rect><text alignment-baseline="middle" dy="0.7em" x="40" y="160" font-size="11px" fill="rgb(0, 0, 255)" font-style="none" font-weight="0" text-decoration="none" transform="translate(40, 160) rotate(NaN) translate(-40, -160)">
      <tspan x="40" dy="0.7em">RED</tspan>
      <tspan x="40" dy="1em">GREEN</tspan>
      <tspan x="40" dy="1em">BLUE</tspan>
    </text>//
  </g>
</svg>
<p>
  textContent=
  <span id="output">

  </span>
</p>

JavaScript

window.addEventListener("load", function() {
  tc = ">"+document.getElementsByTagName("g")[2].getElementsByTagName("tspan")[0].getAttribute("textContent")
  document.getElementById("output").textContent = tc
});