JSFiddle - React, Tailwind, and code Playground

by Kosta_09

HTML

<svg id="svgchart" width="620" height="200">
			
		</svg>
		
		<img src="img/del.png" alt="Корзина" id="trash">
		<img src="img/line.png" alt="Линия" id="line">

CSS

svg {
	border-width: 3px; /* толщина 3px */
	border-style: dotted; /* в виде точек */
	border-color: red;  /* красный цвет */
	
}
#svgchart .Line:hover {stroke: red;
}

JavaScript

function Line (start, container){
			this.coords = [start];
			this.element = document.createElementNS('http://www.w3.org/2000/svg', 'line');
			this.element.setAttribute('stroke', 'black');
			this.element.setAttribute('stroke-width', '3');
			this.element.setAttribute('stroke-linecap', 'round');
			container.appendChild(this.element);
			this.element.classList.add("Line");
			this.element.addEventListener('click', ()=> {
			if (Delete) {
			this.element.remove();
			this.element = null;
			}
			})
			}
			
			var Step = 30;
			Line.prototype.addStart = function () {
			var LineLast = svgchart.lastElementChild;
			var LinePrevious = LineLast.previousElementSibling;
			if (LinePrevious == null) {
			x2Old = null;
			y2Old = null;
			} else {
			x2Old = LinePrevious.getAttribute('x2');
			y2Old = LinePrevious.getAttribute('y2');
			}
			this.element.setAttribute('x1', x2Old || Math.round(this.coords[0].x/Step)*Step);
			this.element.setAttribute('y1', y2Old || this.coords[0].y);
			this.element.setAttribute('x2', (this.element.getAttribute('x1') < Math.round(this.coords[0].x/Step)*Step) ? Math.round(this.coords[0].x/Step)*Step : this.element.getAttribute('x1'));
			this.element.setAttribute('y2', this.coords[0].y);
			}
			
			Line.prototype.addFinish = function (coords) {
			this.coords.push(coords);
			var rev = this.coords.reverse();
			this.element.setAttribute('x2', (this.element.getAttribute('x1') < Math.round(rev[0].x/Step)*Step) ? Math.round(rev[0].x/Step)*Step : this.element.getAttribute('x1'));
			this.element.setAttribute('y2', rev[0].y);
			}
			
			// Определение координат мыши__________________
			function getPoints(e) {
			return {
			x: e.offsetX,
			y: e.offsetY,
			}
			}
			//_____________________________________________
			
			var trashImg = document.getElementById('trash');
			var lineImg = document.getElementById('line');
			var currentLine = null;
			var svgchart = document.getElementById('svgchart');
			var lineDrawing = false;
			var...