JSFiddle - React, Tailwind, and code Playground

by qpIlIpp

HTML

<svg id="pannel2"><path id="PID2" d="M 0 20 L 100 20" stroke="#000000"></path><text id="TID2" x="5" fill="#000000"><textPath xlink:href="#PID2" id="TPath2">TEXT</textPath></text></svg>

<br\>
    	<input type="button" value="TEST" onclick="TEST()" />
    <br/>
    <svg id="pannel"></svg>    
    
<script type="text/javascript">
		function makeSVG(tag, attrs) {
			var el = document.createElementNS('http://www.w3.org/2000/svg', tag);
			for (var k in attrs)
				el.setAttribute(k, attrs[k]);
			return el;
		}

		function appendSVG(item, tag, attrs) {
			var el = document.getElementById(item);
			el.appendChild(makeSVG(tag, attrs));
		}

		function TEST() {
			appendSVG('pannel', 'path', {'id':'PID', 'd': 'M 0 10 L 100 10', 'stroke': '#000000' })
			appendSVG('pannel', 'text', { 'id': 'TID', 'x': '5', 'fill': '#000000' })
			appendSVG('TID', 'textPath', { 'xlink:href': '#PID', 'id':'TPath' })
			$('#TPath').append('TEXT');
		}
	</script>