JSFiddle - React, Tailwind, and code Playground

by stovberpv

HTML

<svg id='svg' viewBox="0 0 400 400">
</svg>

CSS

#svg {
  border: 1px solid black;
  width: 400px;
  height: 400px;
}

JavaScript

/*
 * Конструктор фигур.
 */
function SVGShape(opts) {
  this.layout = createShape();
  this.order = opts.order;

  function createShape() {
    let shape = null;

    switch (opts.type) {
      case 'path':
        shape = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        shape.setAttribute('d', opts.layout);
        break;
        
			case 'polygon':
      	shape = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
        shape.setAttribute('points', opts.layout);
        
      default:
        break;
    }
	
    for(let key in opts.attr) {
    	let attr = opts.attr[key];
      shape.setAttribute(key, attr);
    }
    
    let classes = shape.getAttribute('class') || '';
    shape.setAttribute('class', `svg--element ${classes}`);

    return shape;
  }

  return this;
}

/*
 * Массив фигур, которые будут отображены на экране.
 */
let shapes = [];

/*
 * Создаем фигуры.
 */
let square = new SVGShape({
  type: 'path',
  layout: 'M 50 50 h 250 v 250 h -250 z',
  order: 1,
  attr: {
  	'mydata:name': 'Квадрат'
  }
});
let star = new SVGShape({
	type: 'polygon',
  layout: '100,10 40,198 190,78 10,78 160,198',
  order: 2,
  attr: {
  	'fill': 'red',
    'fill-rule': 'evenodd',
    'mydata:name': 'Звезда'
  }
});

/*
 * Добавялем фигуры в общий массив.
 */
shapes.push(square);
shapes.push(star);

/*
 * Сортировка фигур в порядке отображения.
 */
shapes.sort((a, b) => a.order > b.order ? 1 : a.order < b.order ? -1 : 0);

/*
 * Контейнер который отображается на экране.
 * Отображает все добавляемые фигуры.
 */
let svg = document.getElementById('svg');

/*
 * Отображаем фигуры на экране.
 */
shapes.forEach(shape => { svg.appendChild(shape.layout); });

/*
 * Добавляем слушателя для всех фигур, добавленных на страницу
 */
 let svgElements = svg.querySelectorAll('.svg--element');
 svgElements.forEach(element => {
 	element.addEventListener('click', e => {
  	alert(e.target.getAttribute('mydata:name'));
  });
 });