JSFiddle - React, Tailwind, and code Playground

by christopher gaston

HTML

<svg version="1.1" width="90%" id="ex1-3rds-quarter-s" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px"  viewBox="0 0 323.333 55.333" enable-background="new 0 0 323.333 55.333"
	 xml:space="preserve" preserveAspectRatio="xMinYMid meet">
	 <g id="fullstaff" display="block">
<path id="trebleclef" d="M18.343,26.511c0.08,0,0.179-0.02,0.259-0.02c3.088,0,5.101,2.55,5.101,5.2
	c0,1.514-0.658,3.068-2.132,4.184c-0.438,0.339-0.936,0.558-1.455,0.717c0.06,0.697,0.1,1.395,0.1,2.092
	c0,0.379-0.02,0.777-0.04,1.156c-0.139,2.391-1.793,4.543-4.144,4.543c-2.152,0-3.885-1.753-3.885-3.925
	c0-1.156,1.056-2.052,2.232-2.052c1.076,0,1.893,0.936,1.893,2.052c0,1.036-0.857,1.893-1.893,1.893c-0.219,0-0.418-0.04-0.618-0.12
	c0.518,0.777,1.355,1.295,2.331,1.295c1.913,0,3.128-1.833,3.248-3.806c0.02-0.359,0.04-0.737,0.04-1.096
	c0-0.618-0.02-1.215-0.08-1.833c-0.578,0.1-1.156,0.159-1.773,0.159c-3.746,0-6.635-3.427-6.635-7.452
	c0-3.527,2.61-6.097,4.941-8.787c-0.379-1.235-0.737-2.491-0.897-3.786c-0.12-1.036-0.139-2.072-0.139-3.108
	c0-2.291,1.096-4.463,2.969-5.818c0.06-0.04,0.139-0.06,0.199-0.06c0.08,0,0.139,0,0.199,0.06c1.415,1.674,2.65,4.882,2.65,7.133
	c0,2.849-1.714,5.081-3.587,7.253C17.646,23.742,18.004,25.136,18.343,26.511z M20.037,35.777c1.355-0.478,2.252-1.893,2.252-3.268
	c0-1.793-1.315-3.567-3.447-3.786C19.32,31.034,19.758,33.326,20.037,35.777z M12.326,31.174c0,2.69,2.57,4.922,5.26,4.922
	c0.558,0,1.096-0.04,1.634-0.12c-0.279-2.531-0.737-4.882-1.255-7.253c-1.574,0.159-2.471,1.215-2.471,2.371
	c0,0.877,0.498,1.813,1.614,2.451c0.1,0.1,0.139,0.199,0.139,0.299c0,0.219-0.199,0.438-0.438,0.438c-0.06,0-0.12-0.02-0.179-0.04
	c-1.594-0.857-2.331-2.291-2.331-3.686c0-1.753,1.156-3.467,3.188-3.925c-0.279-1.156-0.578-2.331-0.917-3.487
	C14.438,25.555,12.326,27.986,12.326,31.174z M18.981,10.91c-1.973,0.956-3.228,2.969-3.228,5.161c0,1.474,0.359,2.65,0.717,3.866
	c1.594-1.933,2.909-3.945,2.909-6.456C19.379,12.384,19.3,11.906,18.981,10.91z"/>
<g id="flats"...

JavaScript

function setSVGheight(){
      var svgId = document.getElementsByTagName("svg")[0].id;
      var svgtop = document.getElementById("fullstaff").getBoundingClientRect().top;
      var svgbottom = document.getElementById("fullstaff").getBoundingClientRect().bottom;
      var svgheight = ((svgbottom-svgtop)*1.6).toFixed(3);
      document.getElementById(svgId).style.height=svgheight;
  }
  function exchangestaffandtab(exchangestate){
      if (exchangestate=="s2t"){
          document.getElementById("t2s").style.display="inline";
          document.getElementById("s2t").style.display="none";
          document.getElementById("fullstaff").style.display="none";
          document.getElementById("fullTAB").style.display="block";
      }else if(exchangestate=="t2s"){
          document.getElementById("t2s").style.display="none";
          document.getElementById("s2t").style.display="inline";
          document.getElementById("fullstaff").style.display="block";
          document.getElementById("fullTAB").style.display="none";
      }
  }