JSFiddle - React, Tailwind, and code Playground

by Vivek kt

HTML

<svg id="svgcontent" width="500" height="500" x="500" y="500" overflow="visible" xmlns="http://www.w3.org/2000/svg" xmlns:se="http://svg-edit.googlecode.com" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2500 1600">
    <g id="svg_group_osiz_1">
        <path fill="#67B035" stroke="#000000" stroke-width="0" style="pointer-events:inherit" d="M33.500006798310096,34.537295976892665 L1368.519149676882,68.57235945883485 L1239.0626996463398,654.9203997175246 L500.08242125780816,846.9999328833546 L33.500006798310096,34.537295976892665 z" id="svg_1"/>
    
    </g>
    
</svg>

JavaScript

var path = document.getElementById('svg_1');
alert(path);alert(path.pathSegList.numberOfItems);
for (var i = 0 ; i < path.pathSegList.numberOfItems; i++) {
  var item = path.pathSegList.getItem(i);
	switch (item.pathSegType) {
	case SVGPathSeg.PATHSEG_MOVETO_ABS:
	console.log("x="+item.x +"&&"+i+"&&"+"y="+item.y);
	case SVGPathSeg.PATHSEG_LINETO_ABS:
	var num = path.pathSegList.numberOfItems; 
     var k = i+1;
    var item_n = path.pathSegList.getItem(k);
	var  item_x = (parseFloat(item_n.x)+parseFloat(item.x))/2;
	var  item_y = (parseFloat(item_n.y)+parseFloat(item.y))/2;
    var txtElem = document.createElementNS('http://www.w3.org/2000/svg', 'text');
txtElem.setAttributeNS(null,"x",item_x);
txtElem.setAttributeNS(null,"y",item_y);
txtElem.setAttributeNS(null,"font-size",88);
txtElem.setAttributeNS(null,"id",'meter_path_'+i);
txtElem.setAttributeNS(null,"class",'meter_range');
txtElem.setAttributeNS(null,"fill",'#04739E');
var helloTxt = document.createTextNode("meter");
txtElem.appendChild(helloTxt)
    
       
     path.parentNode.appendChild(txtElem);
   }
}