JSFiddle - React, Tailwind, and code Playground

by ariciaykut

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<select id="getItems"></select>

<div class="vector">
  <!--?xml version="1.0" encoding="UTF-8" standalone="no"?-->
  <!-- Generator: Gravit.io -->
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 1080 1080">
    <defs>
      <clipPath id="_clipPath_MxF8Dkiwk1DE61ESpuAKmuW45DuiKU6M">
        <rect width="1080" height="1080"></rect>
      </clipPath>
    </defs>
    <g clip-path="url(#_clipPath_MxF8Dkiwk1DE61ESpuAKmuW45DuiKU6M)">
      <rect x="0" y="0" width="1080" height="1080" transform="matrix(1,0,0,1,0,0)" fill="rgb(255,233,75)"></rect>
      <g>
        <ellipse cx="-230.50000000000034" cy="759.5" rx="340.49999999999966" ry="79.50000000000011" fill="rgb(251,201,57)"></ellipse>
        <g>
          <circle cx="-230.5000000000004" cy="772.0000000000001" r="257.99999999999994" fill="rgb(51,48,94)"></circle>
          <path d="M -361.2 470.15 L -101.8 470.15 C -91.424 470.15 -83 478.574 -83 488.95 L -83 488.95 C -83 499.326 -91.424 507.75 -101.8 507.75 L -361.2 507.75 C -371.576 507.75 -380 499.326 -380 488.95 L -380 488.95 C -380 478.574 -371.576 470.15 -361.2 470.15 Z" style="stroke:none;fill:#F38D63;stroke-miterlimit:10;"></path>
          <path d="M -231.5 312 L -231.5 312 C -162.787 312 -107 367.787 -107 436.5 L -107 570.5 C -107 639.213 -162.787 695 -231.5 695 L -231.5 695 C -300.213 695 -356 639.213 -356 570.5 L -356 436.5 C -356 367.787 -300.213 312 -231.5 312 Z" style="stroke:none;fill:#5E433C;stroke-miterlimit:10;"></path>
          <path d=" M -233.068 335 L -229.932 335 C -170.049 335 -121.432 383.617 -121.432 443.5 L -121.432 522 C -192.811 575.333 -266.179 575.343 -341.568 522 L -341.568 443.5 C -341.568 383.617 -292.951 335 -233.068 335 Z " fill="rgb(246,168,117)"></path>
          <ellipse cx="-229.49999999999994" cy="556.9999999999999" rx="55.50000000000006" ry="33"...

JavaScript

var generateChildrenMap=function(element){
    	var childrenNames=Array();
    	takeChildren(childrenNames,element,element.prop('tagName'));
    	return childrenNames;
    };
    var takeChildren=function(childrenNames,element,path){
    	var children=element.children();
    	var tempPath;
    	for(var i=0;i<children.length;i++){
    		var child=children[i];
    		tempPath=path+'>'+child.tagName;
    		childrenNames.push(tempPath);
    		if($(child).children().length>0){
    			takeChildren(childrenNames,$(child),tempPath);
    		}
    	}
    }
    var generateSelectWithMap=function(element,map){
    	element.html('');
    	for(var i=0;i<map.length;i++){
    		var option=$('<option>',{
    			'text':map[i],
    			'data-id':i
        	});
    		element.append(option);
    	}
    }
    var myMap=generateChildrenMap($(".vector svg"));
    generateSelectWithMap($("#getItems"),myMap);
    console.log(myMap);