SVG to Raphael Js - triangle test

by Susan Delgado

HTML

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <header>header</header>
            <nav>navbar</nav>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div id="rapeal-box"></div>
        </div>
    </div>
</div>

CSS

body {
    color:#333;
    background:#aaa;
}
#rapeal-box {
    width:683px;
    height:419px;
    border:1px solid yellow;
}
.triangle {
    stroke:#ffffff;
}
.triangle-link {
    stroke:#ffffff;
    fill-opacity: 0;
    cursor: pointer;
}
.triangle-txt {
    fill:#ffffff;
}
.pointer {
    cursor:'pointer';
}

JavaScript

//IMPORTANT NOTES FOR LINKS
//http://www.eccesignum.org/blog/styling-raphaeljs-elements-with-css


$(function () {
    var paper, tctLogo1, tctLogo2, tct1, tct2, tct3, year1, year2, year3, year4,
    t1, t2, t3, t4, t5, t6, t7, t8, t9, t10, t11, txt1, txtdate, txtloc, txt2, txt3, txt4, txt5, txt6, txt7, txt8, txt9, txt10, txt11;
    //From SVG Paths in this set simplify by removing the 3rd from last set of x y points and the last   
    paper = new Raphael('rapeal-box', 683, 419, 0, 0);

    //TRIANGLES 
    t1 = paper.path("M200.314,270.711L491.8 270.711 346.057 18.13 z"),
    t2 = paper.path("M200.065,270.78 L 54.322 270.78 127.194 144.49 z"),
    t3 = paper.path("M127,144 L 272.792 144.794 199.92 271.085 z"),
    t4 = paper.path("M54.207,270.879 L 199.95 270.879 127.078 397.17 z"),
    t5 = paper.path("M345.98,270.855L200.236 270.855 273.108 397.146 z"),
    t6 = paper.path("M492.281,270.971L346.538 270.971 419.41 397.261 z"),
    t7 = paper.path("M419.432,397.241L565.175 397.241 492.303 270.95 z"),
    t8 = paper.path("M638.085,271.11L492.341 271.11 565.213 397.401 z"),
    t9 = paper.path("M492.111,271.011L637.854 271.011 564.982 144.721 z"),
    t10 = paper.path("M565.127,144.794L419.384 144.794 492.256 271.085 z"),
    t11 = paper.path("M492.256,18.425L346.512 18.425 419.384 144.715 z");
    //define Triangle backgrounds
    t1.attr({
        fill: '#EF3E2D',
        stroke: '#fff'
    });
    t2.attr({
        fill: "#502173",
        href: 'http://crf.org/'
    });
    t3.attr({
        fill: "url('http://lorempixel.com/100/200/')",
        href: 'http://crf.org/'
    });
    t4.attr({
        fill: '#ef543f',
        href: 'http://crf.org/'
    });
    t5.attr({
        fill: "url('http://lorempixel.com/100/200/')",
        href: 'http://crf.org/'
    });
    t6.attr({
        fill: '#47a3ae',
        href: 'http://crf.org/'
    });
    t7.attr({
        fill: "url('http://lorempixel.com/100/200/')",
        href: 'http://crf.org/'
    });
   ...