SVG to Raphael Js - triangle test
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 {
fill-opacity: 0;
cursor: pointer;
}
.svg-link {
fill:#ffffff;
font:9px"Arial";
cursor: pointer;
}
.svg-txt {
fill:#ffffff;
font:9px"Arial";
}
.tct2015svg {
fill:#ffffff;
stroke:none;
}
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;
paper = new Raphael('rapeal-box', 683, 419, 0, 0);
//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("M100,10 L300 100 300 20 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/'
});
t8.attr({
fill:...