JSFiddle - React, Tailwind, and code Playground

by petroveg

HTML

<svg class="test" viewBox="0 0 200 200">
	<a xlink:href="#1"><circle class="f1" data-action="shape" cx="50" cy="50" r="50"/></a>
	<a xlink:href="#2"><rect class="f2" data-action="shape" x="100" y="100" width="100" height="100"/></a>
</svg>

CSS

.test {
	width: 300px;
	height: 300px;
}
.f1 {
	fill: #69c;
}
.f2 {
	fill: #369;
}
.active {
	fill: #f60;
}

JavaScript

var activeShape;

document.addEventListener('click', function (e) {
	if (e.target.getAttribute('data-action') == 'shape') {
		if (activeShape) {
			activeShape.setAttribute('class', activeShape.getAttribute('class').replace(/\s*\bactive\b/ig, ''));
		}

		e.target.setAttribute('class', e.target.getAttribute('class') + ' active');
		activeShape = e.target;
	}
});