SVG paths with jquery

by Susan Delgado

HTML

<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%" viewBox="0 0 691 424" enable-background="new 0 0 691 424" xml:space="preserve">
      <defs>
        <pattern id="img1" x="0" y="0" width="100" height="100">
            <image xlink:href="http://lorempixel.com/100/100/" x="0" y="0" width="200" height="200"/><!-- Image from http://silviahartmann.com/background-tile/6-grass-meadow-tile.php-->
        </pattern>
        <pattern id="img2" patternUnits="userSpaceOnUse" width="500" height="500">
            <image xlink:href="http://crf.org/images/slides/slider_content/ctc_circle01.png" x="0" y="0" width="600" height="600"/><!-- Image from http://silviahartmann.com/background-tile/6-grass-meadow-tile.php-->
        </pattern>
    
    </defs>
    <path d="M273.185,144.42L200.313 270.711 491.8 270.711 418.928 144.42 346.057 18.129z" fill="none"></path>
    <path id="t1" d="M200.314,270.711L491.8 270.711 418.929 144.421 346.057 18.13 273.185 144.421 z" fill="#EF3E2D" stroke="#FFFFFF" stroke-width="0.5771" stroke-miterlimit="10"></path>
    <path id="t2" d="M200.065,270.78L54.322 270.78 90.758 207.635 127.194 144.49 163.629 207.635 z" fill="transparent" stroke="#FFFFFF" stroke-width="0.5771" stroke-miterlimit="10"></path>
    <path id="t3" d="M127.048,144.794L272.792 144.794 236.356 207.94 199.92 271.085 163.484 207.94 z" fill="transparent" stroke="#FFFFFF" stroke-width="0.5771" stroke-miterlimit="10"></path>
    <path id="t4" d="M54.207,270.879L199.95 270.879 163.514 334.025 127.078 397.17 90.642 334.025 z" fill="transparent" stroke="#FFFFFF" stroke-width="0.5771" stroke-miterlimit="10"></path>
    <path id="t5" d="M345.98,270.855L200.236 270.855 236.672 334.001 273.108 397.146 309.544 334.001 z" fill="transparent" stroke="#FFFFFF" stroke-width="0.5771" stroke-miterlimit="10"></path>
    <path id="t6" d="M492.281,270.971L346.538 270.971 382.974 334.116 419.41 397.261 455.846 334.116...

CSS

body {
    background:#007a89;
    /* background-image:url('http://lorempixel.com/1000/1000/'); */
}

JavaScript

$(function () {
    $('#t2').hover(function () {
        $(this).attr({
            fill: 'url(#img1)'
        });
    }, function () {
        $(this).attr({
            fill: 'transparent'
        });
    });
    
    $('#t3').hover(function () {
        $(this).attr({
            fill: 'url(#img1)'
        });
    }, function () {
        $(this).attr({
            fill: 'transparent'
        });
    });
    
    $('#t4').hover(function () {
        $(this).attr({
            fill: 'url(#img1)'
        });
    }, function () {
        $(this).attr({
            fill: 'transparent'
        });
    });
    
    $('#t5').hover(function () {
        $(this).attr({
            fill: 'url(#img1)'
        });
    }, function () {
        $(this).attr({
            fill: 'transparent'
        });
    });
    
    $('#t6').hover(function () {
        $(this).attr({
            fill: 'url(#img1)'
        });
    }, function () {
        $(this).attr({
            fill: 'transparent'
        });
    });
    
    $('#t7').hover(function () {
        $(this).attr({
            fill: 'url(#img1)'
        });
    }, function () {
        $(this).attr({
            fill: 'transparent'
        });
    });
    
    $('#t8').hover(function () {
        $(this).attr({
            fill: 'url(#img1)'
        });
    }, function () {
        $(this).attr({
            fill: 'transparent'
        });
    });
    
    $('#t9').hover(function () {
        $(this).attr({
            fill: 'url(#img1)'
        });
    }, function () {
        $(this).attr({
            fill: 'transparent'
        });
    });
    
    $('#t10').hover(function () {
        $(this).attr({
            fill: 'url(#img1)'
        });
    }, function () {
        $(this).attr({
            fill: 'transparent'
        });
    });
    
    $('#t11').hover(function () {
        $(this).attr({
            fill: 'url(#img1)'
        });
    }, function () {
        $(this).attr({
            fill: 'transparent'
    ...