JSFiddle - React, Tailwind, and code Playground

by stovberpv

HTML

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

CSS

#svg {
  width: 400px;
  height: 400px;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, .5);
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, .5);
}

JavaScript

/*
 * Конструктор фигур.
 */
function SVGShape(opts) {
  let _namespace = 'http://www.w3.org/2000/svg';
  
  this.layout = createShape();
  this.order = opts.order;
  
  function createShape() {
    let shape = null;

    switch (opts.type) {
      case 'path':
        shape = document.createElementNS(_namespace, 'path');
        shape.setAttribute('d', opts.layout);
        break;
        
			case 'polygon':
      	shape = document.createElementNS(_namespace, 'polygon');
        shape.setAttribute('points', opts.layout);
        break;
        
      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 => {
 ...