JSFiddle - React, Tailwind, and code Playground

UK SVG MAP

by Andrew Pougher

HTML

<section><div id="level3"><center>


<svg version="1.1" id="svg_map" xmlns="http://www.w3.org/2000/svg" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;" x="0px" y="0px" viewBox="125 -1112 1450.9 2375" xml:space="preserve" width="400px" height="655">


		<metadata id="metadata211">
			<sfw xmlns="&ns_sfw;">
				<slices></slices>
				<sliceSourceBounds width="1429" height="2340.8" bottomLeftOrigin="true" y="10.4" x="8.9"></sliceSourceBounds>
			</sfw>
		</metadata>

		<defs>
			<filter xmlns="http://www.w3.org/2000/svg" id="dropshadow" width="130%" height="130%"> 
		      <feGaussianBlur in="SourceAlpha" stdDeviation="10"></feGaussianBlur>

		      <feOffset dx="-10" dy="10" result="offsetblur"></feOffset> 

		      <feFlood flood-color="#777"></feFlood>

		      <feComposite operator="in"        in2="offsetblur"></feComposite>

		      <feMerge> 
		        <feMergeNode></feMergeNode>
		        <feMergeNode in="SourceGraphic"></feMergeNode>
		      </feMerge>

    		</filter>
		</defs>

		<a xlink:href="#" target="_self" id="wales" title="Wales" class="map-region">
			<polygon class="map-region-single" points="872.5 475.5, 883.1 466.5, 846.3 439.1, 823.5 418.5, 780.6 433.4, 760.9 430.8, 745.1 422.5, 746.4 435.2, 723.2 443.5, 700.0 447.4, 714.0 428.1, 690.3 428.5, 684.2 416.2, 678.5 399.1, 639.1 402.6, 636.5 420.6, 619.4 423.7, 632.5 442.1, 641.3 443.0, 656.2 462.3, 670.2 471.9, 670.1 475.8, 671.0 475.9, 672.0 465.9, 698.0 445.9, 672.0 465.9, 671.0 475.9, 670.1 475.8, 669.7 494.7, 639.9 517.0, 632.9 518.3, 601.8 553.0, 605.7 555.2, 627.6 548.2, 638.6 557.4, 645.2 553.0, 644.8 544.2, 662.8 530.2, 709.3 524.9, 697.9 532.8, 700.1 545.5, 697.9 555.1, 711.5 573.5, 709.3 581.8, 695.7 599.8, 707.5 619.5, 708.8 632.6, 694.3 672.9, 681.2 688.7, 660.2 698.3, 633.5 717.6, 612.0 718.0, 609.4 722.4, 600.0 720.0, 594.7 731.0, 585.9 743.3, 573.6 741.1, 563.5 746.8, 557.4 739.8, 546.0 742.0, 544.2 755.6, 510.9 769.6, 510.5 776.6, 514.0 781.9, 530.7 779.7, 541.7...

CSS

.map-region:hover .map-region-single {
				fill: #F5B308;
				filter: url("#dropshadow");
			    stroke: #FC4106;
			    stroke-width: 8px;
			}

			.map-region-single {
				transition: fill 0.25s;
				fill: #CC3300;
				cursor: pointer;
			}
      
      
      
      .svg #svg_map {
  width: 200px;
  height: 327px
}

@media only screen and (min-width:768px) {
  .svg #svg_map {
    width: 400px;
    height: 655px
  }
}

.svg #img_map {
  display: none
}

.svg .map-tool-tip {
  display: none;
  font-size: 20px;
  font-weight: 700;
  text-shadow: 1px 1px #fff;
  font-family: arial, helvetica, sans-serif;
  position: fixed
}

.no-svg #svg_map {
  display: none
}

.no-svg #img_map {
  display: block
}

.no-svg .map-tool-tip {
  display: none
}

JavaScript

var regions = $('#svg_map .map-region');

		regions.each(function(i, value) {

			$value = $(value);

			$value.mouseenter(function() {
        $('#tool-tip_' + value.id).toggle();
      });

			$value.mouseleave(function() {
        $('#tool-tip_' + value.id).toggle();
      });

			$value.mousemove(function(event) {
        $('#tool-tip_' + value.id).css({
          top: event.clientY - 20,
          left: event.clientX + 20
        });
      });
		});