А возможно ли гнать это все дело через data тэги ? Что-то по типу такого ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<svg width="600" height="240">
<rect class="first_st1" data-hsl="(1, 50%, 50%)" width="80" height="80" x="0" y="0"></rect>
<rect class="first_st2" data-hsl="(1, 70%, 40%)" width="80" height="80" x="0" y="80"></rect>
<rect class="first_st3" data-hsl="(1, 90%, 30%)" width="80" height="80" x="0" y="160"></rect>
<rect class="second_st1" data-hsl="(11, 50%, 50%)" width="80" height="80" x="160" y="0"></rect>
<rect class="second_st2" data-hsl="(11, 70%, 40%)" width="80" height="80" x="160" y="80"></rect>
<rect class="second_st3" data-hsl="(11, 90%, 30%)" width="80" height="80" x="160" y="160"></rect>
</svg>
<script>
window.onload = function(){
var allFirstColors = $("[class^='first_st']"),
firstColorsLength = allFirstColors.length,
allSecondColors = $("[class^='second_st']"),
secondColorsLength = allFirstColors.length;
var h,s,l;
allFirstColors.each(function(indx, el){
let color = $(el).data("hsl");
$(el).data("hsl", h+', '+s+', '+l);
console.log("color = " + color );
});
}
</script>
</body>
</html>