JSFiddle - React, Tailwind, and code Playground

by Alexandr

HTML

<!-- (c) ammap.com | SVG map of Germany -->
<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" 
  width="400" height="400" viewBox="0 0 600 800" style="border:1px solid">
	<defs>
		
		

	</defs>
	<g> 
	 <title>"Baden-Wurttemberg" </title>
		<path id="DE-BW"   class="land" d="M180.99,750.43l0.58,2.09l-3.47,0.13L180.99,750.43zM206.4,570.93l8.66,-0.33l4.12,-7.25l6.54,0.95l0.83,-6.5l-2.07,-1.9l-1.84,2.62l0.97,-2.42l-4.96,-0.95l1.24,-2.93l11.93,-2.03l3.81,4.36l0.36,-3.78l5.23,-0.86l-1.54,8.57l1.8,1.69l3.63,-3.95l1.67,3.87l3.98,-4.23l4.61,11.83l-3.88,5.45l3.04,0.98l3.58,-3.6l0.77,9.54l5.81,-0.09l2.95,-6.01l3.68,3.64l-1.77,6.05l4.31,5.07l-3.48,1.64l3.18,9.66l-2.99,2.1l0.91,5.72l7.87,4.93l-2.46,4.64l2.62,0.9l-0.01,5l6.23,1.2l6.94,10.77l-2.17,1.09l1.94,4.53l-2.36,10.79l4.98,5.72l-5.35,2.5l1.74,-3.05l-1.91,-0.44l-3.02,4.26l-5.88,-4.76l-0.89,3.63l4.3,5.42l-0.75,8.22l-4.84,1.1l-4.09,5.13l-4.1,-1.88l-4.39,1.77l-4.24,7.74l6.02,9.22l4.53,16.17l-3.72,23.3l3.8,5.37l-4.73,2.12l3.47,2.57l0.82,7.82l-3.45,3.6l-3.16,-4.43l-3.99,3.28l-7.15,-2.49l-6.35,6.24l-7.29,0.87l-2.47,5.16l0,0l-32.49,-12.44l-12.39,2.97l-5.46,-8.47l-2.45,1.83l1.4,4.16l-4.17,-1.79l-0.25,-6.73l-1.86,0.82l-2.53,-4.15l-1.61,3.9l-0.73,-3.78l-3.23,-0.87l0.58,2.52l-5.88,1.11l-4.98,9.09l4.45,3.28l8.21,-3.17l1.48,2.35l-3.33,4.98l-3.59,-3.6l-4,2.98l1.93,2.27l-6.63,1.06l-11.33,-5.16l-7.36,5.95l-9.36,1.3l-3.24,-4.09l-4.44,-0.06l-8.25,5.23l-3.72,-2.72l3.29,-0.43l0.41,-3.27l-6.5,1.03l-5.01,-10.15l2.32,-3.43l0.55,-13.76l4.19,-8.82l-3.37,-5.92l0.47,-8.22l7.41,-17.3l3.29,-2.43l-0.78,-6.43l6.8,-23.67l8.46,-11.19l7.49,-4.36l9.11,-15.81l0,0l8.06,-13.06l2.02,-13.01l6.23,-5.87l-2.43,-2.9l3.64,-10.75l-4.12,-1.49l-1.29,-13.08l0,0l3.37,0.03l5.46,6.77l3.5,-2.61l-1.32,-6.75l6.19,-1.33l0.61,8.58l7.72,1.09l0.59,3.21l4.26,-1.08l-1.4,3.51l-3.26,-0.13l-1.54,5.66l3.08,1.47l6.37,-5.89l0.1,-4.73l11.14,-1.27l-3.41,-4.71L206.4,570.93z"/>
	</g> 
    <g> 
	 <title>"Bavaria" </title>	
		<path id="DE-BY"...

CSS

.land
 {
 fill: #CCCCCC;
 fill-opacity: 1;
 stroke:white;
 stroke-opacity: 1;
 stroke-width:0.5;
 transform-origin: center center;
 transform-box: fill-box;
 transition:  1s;
			}
.land.scaled {
 fill:dodgerblue;
 stroke:white;
 stroke-width:2px;
 
  -webkit-transform: scale(1.2);
 transform: scale(1.2);
 }

JavaScript

document.querySelectorAll('path.land').forEach(path => {
  path.addEventListener('mouseover', e => {
  path.parentNode.parentNode.append(path.parentNode);
 const paths = [...document.querySelectorAll('path.land')]
 setTimeout(()=> {
 paths[paths.length - 1].classList.add('scaled');    
 },20)
 
  });
});


document.querySelectorAll('path.land').forEach(path => {
  path.addEventListener('mouseout', e => {
 path.parentNode.parentNode.append(path.parentNode);
 const paths = [...document.querySelectorAll('path.land')]
 
    setTimeout(()=> {
paths[paths.length - 1].classList.remove('scaled');       
 },20)
  });
});