JSFiddle - React, Tailwind, and code Playground

by petroveg

HTML

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

CSS

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

JavaScript

var activeShape;

document.addEventListener('click', function (e) {
	if (e.target.classList.contains('shape')) {
		if (activeShape) {
			activeShape.classList.remove('active');
		}

		e.target.classList.add('active');
		activeShape = e.target;
	}
});