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;
}
svg a:focus, svg a:hover{
    text-decoration:none !important;
}
#rapeal-box {
    width:100%;
    height:419px;
    border:1px solid yellow;
}
.tri {
    stroke:#ffffff;
}
.tri-link {
    fill-opacity: 0;
    cursor: pointer;
}
.svg-txt {
    fill:#ffffff;
    font-size:12px !important; 
    /* font-family:'Gotham SSm A', 'Gotham SSm B' !important; */ 
}
.svg-link {
    fill:#ffffff;    
    font-size:12px !important; 
   /* font-family:'Gotham SSm A', 'Gotham SSm B' !important; */ 
    cursor: pointer;
}
.tct2015svg {
    fill:#ffffff;
    stroke:none;
}

JavaScript

$(function () {
    
    //IMPORTANT NOTES FOR LINKS in IE6-IE8
        //http://www.eccesignum.org/blog/styling-raphaeljs-elements-with-css

        //JSFIDDLE LINK jsfiddle.net//js/lib/raphael-1.5.2-min.js
       
    var  
    tctlogo1, tctlogo2, tct1, tct2, tct3, year1, year2, year3, year4,
    t1, t2, t3, t4, t5, t6, t7, t8, t9, t10, t11, 
    txt1,txt2,txt3, 
    t2link, t3link, t4link, t5link, t6link, t7link, t8link, t9link, t10link, t11link;
    var paper = new Raphael('rapeal-box', 683, 419);
    //CREATE TRIANGLES 
    //From SVG Paths in this set simplify by removing the 3rd from last set of x y points and the last 
    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"); 
      
     //Create TEXT NODES
    //TEXT IS ALIGNED BY THE MIDDLE OF THE TEXT
    txt1 = paper.text(349, 157, "CONNECTING \nYOUR WORLD");
    txt2 = paper.text(364, 231, "October 11-15, 2015");
    txt3 = paper.text(360, 246, "San Francisco, CA");
    t2link = paper.text(126, 246, "TCT 2015 \nPROGRAM");
    t3link = paper.text(200, 180, "WEEK AT \nA GLANCE");
    t4link = paper.text(129, 307, "SATELLITE \nSYMPOSIA");
    t5link = paper.text(275, 307, "KEYNOTE \nSPEAKERS");
    t6link = paper.text(421, 307, "CALL FOR \nSCIENCE");
    t7link =...