SVG Interactive Map

Interactive SVG map inline in HTML, and styled with CSS.

by the_voder

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<!--
SVG was exported from Illustrator, and manually edited after export as follows:

1. 'preserveAspectRatio' property added to base SVG tag
2. Explicitly-declared width and height removed from SVG tag
3. Class added to active region path nodes so they could be styled with single CSS rule

Region paths were named in Illustrator, so exported SVG paths had ID properties set to sensible values that could then be selected with CSS
-->
<svg
	version="1.1"
	id="SVGMap"
	xmlns="http://www.w3.org/2000/svg"
	viewBox="0 0 236 267"
    preserveAspectRatio="xMinYMin"
	xml:space="preserve">
     
   <defs>
       <desc>Define image to be used as background tile
           Use by setting fill: url(imageID); in CSS</desc> 
       <pattern id="tile1" patternUnits="userSpaceOnUse" width="100" height="100">
            <image xlink:href="https://dl.dropboxusercontent.com/u/56358859/jsfiddle_assets/scrollingbg/wovenbg.jpg" x="0" y="0" width="100" height="100" />
        </pattern>
    </defs>    
     
    <path fill-rule="evenodd" clip-rule="evenodd"...

CSS

#SVGMap {
    width: 90%;
    margin-top: -10px;
}

.SVGMap-activeregion {
    fill-opacity: 0.5;
    transition: fill-opacity 1s;
}

.SVGMap-activeregion:hover {
    fill-opacity: 1 !important;
    transition: fill-opacity 0.25s;
}

#SVGMap-Puglia {
    fill: blue !important;
    /* Use background image (defined in SVG defs)
    fill: url(#tile1) !important; */
}
#SVGMap-Campania {
    fill: red !important; 
}
#SVGMap-Sicilia {
    fill: green !important; 
}
#SVGMap-Calabria {
    fill: orange !important; 
}

JavaScript

$("#SVGMap-Puglia").click(function() {
    alert("You clicked on Puglia");
});
$("#SVGMap-Campania").click(function() {
    alert("You clicked on Campania");
});
$("#SVGMap-Sicilia").click(function() {
    alert("You clicked on Sicilia");
});
$("#SVGMap-Calabria").click(function() {
    alert("You clicked on Calabria");
});