SVG World map, fade on hover.

by mrbinky3000

HTML

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="world" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	  viewBox="0 0 1476.105 724.327" enable-background="new 0 0 1476.105 724.327"
	 xml:space="preserve">
	 	 <style>
	 *{
	     pointer-events: fill;
	 	}
	 #north_america{
	 	-webkit-transition: fill .4s ease;
	 	-moz-transition: fill .4s ease;
	 	-o-transition: fill .4s ease;
	 	transition: fill .4s ease;	 
	 	fill:red;
	 }
	 #north_america:hover path {
	 	fill:white;
	 }	
	 #south_america path{
	 	-webkit-transition: fill .4s ease;
	 	-moz-transition: fill .4s ease;
	 	-o-transition: fill .4s ease;
	 	transition: fill .4s ease;
	 }
	 #south_america:hover path {
	 	fill:white;
	 }
	 #africa path{
	 	-webkit-transition: fill .4s ease;
	 	-moz-transition: fill .4s ease;
	 	-o-transition: fill .4s ease;
	 	transition: fill .4s ease;
	 }
	 #africa:hover path {
	 	fill:white;
	 }
	 #asia path{
	 	-webkit-transition: fill .4s ease;
	 	-moz-transition: fill .4s ease;
	 	-o-transition: fill .4s ease;
	 	transition: fill .4s ease;
	 }
	 #asia:hover path {
	 	fill:white;
	 }
	 #europe path{
	 	-webkit-transition: fill .4s ease;
	 	-moz-transition: fill .4s ease;
	 	-o-transition: fill .4s ease;
	 	transition: fill .4s ease;
	 	stroke:#c4c4c4;
	 	fill:red;
	 }
	 #europe:hover path {
	 	fill:white;
	 }
	 #australasia path{
	 	-webkit-transition: fill .4s ease;
	 	-moz-transition: fill .4s ease;
	 	-o-transition: fill .4s ease;
	 	transition: fill .4s ease;
	 }
	 #australasia:hover path {
	 	fill:white;
	 }
	 </style>

<g id="europe">
	<path fill="#FAFAFA" stroke="#55565A" stroke-width="0.5" stroke-linejoin="round" stroke-miterlimit="10"...