SVG testing - jquery hovers 01

by Susan Delgado

HTML

<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="424px" viewBox="0 0 691 424" enable-background="new 0 0 691 424" xml:space="preserve">
    <polygon class="one" fill="none" points="273.185,144.42 200.313,270.711 491.8,270.711 418.928,144.42 346.057,18.129 " />
    <g>
        <polygon class="two" fill="#EF3E2D" stroke="#FFFFFF" stroke-width="0.5771" stroke-miterlimit="10" points="200.314,270.711 491.8,270.711 
		418.929,144.421 346.057,18.13 273.185,144.421 	" />
    </g>
    <polygon class="three" fill="none" stroke="#FFFFFF" stroke-width="0.5771" stroke-miterlimit="10" points="200.065,270.78 54.322,270.78 
	90.758,207.635 127.194,144.49 163.629,207.635 " />
    <text transform="matrix(0.9994 0 0 1 154.2236 237.6816)" fill="#FFFFFF" font-family="'Gotham-Bold'" font-size="11.545"></text>
    <polygon class="five" fill="none" stroke="#FFFFFF" stroke-width="0.5771" stroke-miterlimit="10" points="127.048,144.794 272.792,144.794 
	236.356,207.94 199.92,271.085 163.484,207.94 " />
    <text transform="matrix(0.9994 0 0 1 254.9404 173.2607)" fill="#FFFFFF" font-family="'Gotham-Bold'" font-size="11.545"></text>
    <g>
        <polygon class="six" fill="none" stroke="#FFFFFF" stroke-width="0.5771" stroke-miterlimit="10" points="54.207,270.879 199.95,270.879 
		163.514,334.025 127.078,397.17 90.642,334.025 	" />
    </g>
    <text transform="matrix(0.9994 0 0 1 159.2227 299.9092)" fill="#FFFFFF" font-family="'Gotham-Bold'" font-size="11.545"></text>
    <g>
        <polygon class="seven" fill="none" stroke="#FFFFFF" stroke-width="0.5771" stroke-miterlimit="10" points="345.98,270.855 200.236,270.855 
		236.672,334.001...

CSS

body {
    background:#eee;
    background-image:url('http://lorempixel.com/1000/1000/');
}
one {
    background:blue;
}
two {
    background:red;
}
three {
    background:green;
}

JavaScript

$(function () {
    $('.one').hover(function () {
        $(this).attr('fill', 'blue');
    });
    
    $('.two').hover(function () {
        $(this).attr('fill', 'green');
    });
    
    $('.three').hover(function () {
        $(this).attr('fill', 'red');
    });
    
    $('.four').hover(function () {
        $(this).attr('fill', 'orange');
    });
    
    $('.five').hover(function () {
        $(this).attr('fill', 'yellow');
    });
    
    $('.six').hover(function () {
        $(this).attr('fill', 'purple');
    });
    
    $('.seven').hover(function () {
        $(this).attr('fill', 'pink');
    });
});