SVG Controls
Trying to write a formula to be able to control fill and stroke colors of an SVG
by mamounothman
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/gsap.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div>
<svg id="Line" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 171.75 330.75">
<defs>
<style>
.cls-1, .cls-2 {
fill: none;
}
.cls-1, .cls-3 {
stroke: #fff;
}
.cls-1, .cls-2, .cls-3 {
stroke-miterlimit: 10;
}
.cls-1 {
stroke-width: 3.5px;
}
.cls-2 {
stroke: #0079c2;
stroke-width: 3px;
}
.cls-3 {
stroke-width: 0.75px;
}
</style>
</defs>
<g id="SIR_Line" data-name="SIR Line">
<g id="SIT0020">
<line class="cls-1" x1="12.438" y1="311.227" x2="3.375" y2="327.375"/>
<line class="cls-2" x1="12.438" y1="311.227" x2="3.375" y2="327.375"/>
</g>
<g id="SIT0019">
<line class="cls-1" x1="21.558" y1="294.976" x2="12.438" y2="311.227"/>
<line class="cls-2" x1="21.558" y1="294.976" x2="12.438" y2="311.227"/>
</g>
<g id="SIT0018">
<line class="cls-1" x1="30.875" y1="278.375" x2="21.558" y2="294.976"/>
<line class="cls-2" x1="30.875" y1="278.375" x2="21.558" y2="294.976"/>
</g>
<g id="SIT0017">
<line class="cls-1" x1="40.042" y1="262.042" x2="30.875" y2="278.375"/>
<line class="cls-2" x1="40.042" y1="262.042" x2="30.875" y2="278.375"/>
</g>
<g id="SIT0016">
<line class="cls-1" x1="49.208" y1="245.708" x2="40.042" y2="262.042"/>
<line class="cls-2" x1="49.208" y1="245.708" x2="40.042" y2="262.042"/>
</g>
<g id="SIT0015">
<line class="cls-1" x1="58.375"...
JavaScript
var lsSIT0020 = $("#SIT0020");
var lsSIT0019 = $("#SIT0019");
var lsSIT0018 = $("#SIT0018");
var lsSIT0017 = $("#SIT0017");
var lsSIT0016 = $("#SIT0016");
var lsSIT0015 = $("#SIT0015");
var lsSIT0014 = $("#SIT0014");
var lsSIT0013 = $("#SIT0013");
var lsSIT0012 = $("#SIT0012");
var lsSIT0011 = $("#SIT0011");
var lsSIT0010 = $("#SIT0010");
var lsSIT0009 = $("#SIT0009");
var lsSIT0008 = $("#SIT0008");
var lsSIT0007 = $("#SIT0007");
var lsSIT0006 = $("#SIT0006");
var lsSIT0005 = $("#SIT0005");
var lsSIT0004 = $("#SIT0004");
var lsSIT0003 = $("#SIT0003");
var lsSIT0002 = $("#SIT0002");
var lsSIT0001 = $("#SIT0001");
var SIR4947 = $("#SIR4947");
var SIR8524 = $("#SIR8524");
var SIR4250 = $("#SIR4250");
var SIR3514 = $("#SIR3514");
var SIR3569 = $("#SIR3569");
var SIR1986 = $("#SIR1986");
var SIR352 = $("#SIR352");
var SIR1469 = $("#SIR1469");
var SIR1772 = $("#SIR1772");
var SIR470 = $("#SIR470");
var SIR3327 = $("#SIR3327");
var SIR3161 = $("#SIR3161");
var SIR1755 = $("#SIR1755");
var SIR2232 = $("#SIR2232");
var SIR1324 = $("#SIR1324");
var SIR3338 = $("#SIR3338");
var SIR1763 = $("#SIR1763");
var SIR1055 = $("#SIR1055");
var SIR4703 = $("#SIR4703");
var SIR4939 = $("#SIR4939");
var SIR4629 = $("#SIR4629");
var colorSet = {
'#ff0000': '#ff6666',
'#008250': '#42a680',
'#a3238f': '#bd73b2',
'#0079c2': '#42a0db',
'#ff8c00': '#ffba66',
'#96c800': '#cae087',
'#a86000': '#c28f4e',
'#999999': '#cccccc',
'#ffe000': '#fff399'
}
var animateThis = function(obj) {
var getStroke = obj.getAttribute('stroke');
TweenLite.to(obj, 1.5, {
fill: "#bbbbbb",
yoyo: true,
repeat: -1
});
};
var itemsToAnimate = [lsSIT0020, lsSIT0019, lsSIT0018, lsSIT0017, lsSIT0016, lsSIT0015, lsSIT0014, lsSIT0013, lsSIT0012, lsSIT0011, lsSIT0010, lsSIT0009, lsSIT0008, lsSIT0007, lsSIT0006, lsSIT0005, lsSIT0004, lsSIT0003, lsSIT0002, lsSIT0001, SIR4947, SIR8524, SIR4250, SIR3514, SIR3569, SIR1986, SIR352, SIR1469, SIR1772, SIR470, SIR3327, SIR3161, SIR1755,...