We Keep Coding

SVG - how to combine multiple paths

Am wondering how can we combine multiple svg paths to a single path so that fill like operation can be done.
my svg
<?xml version='1.0' encoding='UTF-8'?>
<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='227.178pt' height='191.646pt' viewBox='0 -191.646 227.178 191.646'>
<g id='page1' >
<g transform='matrix(1 0 0 -1 0 0)'>
<path xmlns="http://www.w3.org/2000/svg" d="M5.769237 179.523834C5.769237 181.433821 6.526939 183.265855 7.878501 184.613448C9.226377 185.965009 11.058411 186.722994 12.968398 186.722994" stroke="#ff0ef4" fill="none" stroke-width=".720001" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path xmlns="http://www.w3.org/2000/svg" d="M5.769237 179.523834V11.753911" stroke="#ff0ef4" fill="yellow" stroke-width=".720001" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path xmlns="http://www.w3.org/2000/svg" d="M13.027075 4.988281C11.116805 4.988281 9.28477 5.746094 7.933209 7.097658C6.585617 8.44922 5.827915 10.277342 5.827915 12.187499" stroke="#ff0ef4" fill="none" stroke-width=".720001" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path xmlns="http://www.w3.org/2000/svg" d="M214.210917 4.921875H13.027075" stroke="#ff0ef4" fill="none" stroke-width=".720001" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path xmlns="http://www.w3.org/2000/svg" d="M221.41016 12.121112C221.41016 10.214838 220.648441 8.382804 219.300783 7.031254C217.949225 5.67969 216.11719 4.921875 214.210917 4.921875" stroke="#ff0ef4" fill="none" stroke-width=".720001" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path xmlns="http://www.w3.org/2000/svg" d="M221.41016 179.523834V12.121112" stroke="#ff0ef4" fill="none" stroke-width=".720001" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path xmlns="http://www.w3.org/2000/svg" d="M214.210917 186.722994C216.11719 186.722994 217.949225 185.965009 219.300783 184.613448C220.648441 183.265855 221.41016 181.433821 221.41016 179.523834" stroke="#ff0ef4" fill="none" stroke-width=".720001" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path xmlns="http://www.w3.org/2000/svg" d="M214.210917 186.722994H12.968398" stroke="#ff0ef4" fill="none" stroke-width=".720001" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</g>
</svg>
i tried to combine path data like this but it messed up the shape
<path xmlns="http://www.w3.org/2000/svg" d="M5.769237 179.523834 C5.769237 181.433821 6.526939 183.265855 7.878501 184.613448 C9.226377 185.965009 11.058411 186.722994 12.968398 186.722994 V11.753911 C11.116805 4.988281 9.28477 5.746094 7.933209 7.097658 C6.585617 8.44922 5.827915 10.277342 5.827915 12.187499 H13.027075 C221.41016 10.214838 220.648441 8.382804 219.300783 7.031254 C217.949225 5.67969 216.11719 4.921875 214.210917 4.921875 V12.121112 C216.11719 186.722994 217.949225 185.965009 219.300783 184.613448 C220.648441 183.265855 221.41016 181.433821 221.41016 179.523834 H12.968398 z" stroke="#ff0ef4" fill="yellow" stroke-width=".720001" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
my goal is to combine them so that i can fill inside of the shape. so any idea how to to do it properly or any there is js/php library which can do it

SVG is not showing center while animating and after finished animation

I am new in javascript & SVG Can any one help me get out of this stuck
trying keep center clock image while resize using elem.style.left and elem.style.topp;
or any chance to use zoom function using plain javascript
or suggest any work around achieve get center of SVG element
or suggest any work around achieve get center of SVG element
or suggest any work around achieve get center of SVG element
or suggest any work around achieve get center of SVG element
var elem = document.getElementById("clock1");
var pos = 0
var id = setInterval(frame, 5);
var id2 = setInterval(frame2, 5);
//resize div
function frame() {
if (pos == 600) {
clearInterval(id); //stop animation
} else {
//set defualt size of SVG (elem)
elem.style.width = "0px";
elem.style.height = "0px";
pos++;
//resize width & Height for zoom svg (elem)
if(pos < 600) {
elem.style.width = pos + 'px';
elem.style.height = pos + 'px';
} else {
elem.style.width = pos + 'px';
elem.style.height = pos + 'px';
};
};
};
//function for set center of svg (elem)
function frame2 () {
elem.style.top = "0px";
elem.style.left = "0px" ;
if(elem.style.left > "0.5px") {
var test =parseInt(document.getElementById("wrapper").style.width); // for get center
var test2 = parseInt(elem.style.width); //remove px
var left = parseInt(elem.style.left); //remove px
var calculatedwidth = Math.max(((test - test2) / 2) +
left) ;// for get center
var modifiedwidth = calculatedwidth;
elem.style.left =calculatedwidth; //set position
elem.style.top =calculatedwidth; //set position
};
};
#clock1 {
width: 219px;
height: 207px;
position: absolute;
background-color:#fff;
/* transform: translate(-50%, -50%);*/
}
<html lang="en">
<!-- Creator: CorelDRAW -->
<head>
</head>
<body>
<div style="width:234px; height:258px; background-color:green; overflow:hidden; justify-content: center; top: 0px !important; left: 0px; position: absolute;" id="wrapper" >
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="210mm" height="297mm" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd;position: absolute; "
viewBox="0 0 200 200"
xmlns:xlink="http://www.w3.org/1999/xlink" id="clock1" >
<defs>
<style type="text/css">
<![CDATA[
.fil1 {fill:black}
.fil2 {fill:#AA0000}
.fil0 {fill:white}
]]>
</style>
</defs>
<g id="Layer_x0020_1" >
<metadata id="CorelCorpID_0Corel-Layer"/>
<g id="_239192552">
<circle id="_239615328" class="fil0" cx="107.366" cy="108.741" r="79.375"/>
<g>
<g>
<g>
<g>
<g>
<g>
<g>
<polygon id="_239615616" class="fil1" />
</g>
<g>
<polygon id="_239615664" class="fil1" />
</g>
<g>
<polygon id="_239615736" class="fil1" />
</g>
<g>
<polygon id="_239602424" class="fil1" />
</g>
</g>
</g>
<g>
<g>
<g>
<polygon id="_239602256" class="fil1" points="151.673,45.1189 154.182,46.9414 149.626,53.2125 147.117,51.39 "/>
</g>
<g>
<polygon id="_239602160" class="fil1" points="158.081,50.0988 160.385,52.1735 155.198,57.934 152.894,55.8593 "/>
</g>
<g>
<polygon id="_239602112" class="fil1" points="163.933,55.7213 166.008,58.0255 160.247,63.2122 158.172,60.908 "/>
</g>
<g>
<polygon id="_239602208" class="fil1" points="169.165,61.9246 170.988,64.433 164.716,68.9892 162.894,66.4808 "/>
</g>
</g>
</g>
<g>
<g>
<g>
<polygon id="_239602376" class="fil1" points="177.548,75.7965 178.809,78.629 171.728,81.7818 170.467,78.9493 "/>
</g>
<g>
<polygon id="_239601872" class="fil1" points="180.607,83.313 181.565,86.2618 174.193,88.6571 173.235,85.7083 "/>
</g>
<g>
<polygon id="_239601008" class="fil1" points="182.864,91.1082 183.509,94.141 175.927,95.7526 175.282,92.7198 "/>
</g>
<g>
<polygon id="_239601488" class="fil1" points="184.294,99.0965 184.618,102.18 176.909,102.99 176.585,99.9067 "/>
</g>
</g>
</g>
<g>
<polygon id="_239601464" class="fil1" points="104.265,31.2262 110.466,31.2262 110.466,54.4806 104.265,54.4806 "/>
</g>
<g>
<polygon id="_239601272" class="fil1" points="143.438,40.0609 148.808,43.1615 139.506,59.2726 134.136,56.172 "/>
</g>
<g>
<polygon id="_239601392" class="fil1" points="172.945,67.2983 176.046,72.6687 159.935,81.9705 156.834,76.6001 "/>
</g>
</g>
</g>
<g>
<g>
<g>
<g>
<g>
<polygon id="_239601440" class="fil1" points="184.618,115.302 184.294,118.385 176.585,117.575 176.909,114.491 "/>
</g>
<g>
<polygon id="_239600984" class="fil1" points="183.509,123.341 182.864,126.373 175.282,124.762 175.927,121.729 "/>
</g>
<g>
<polygon id="_239602544" class="fil1" points="181.565,131.22 180.607,134.168 173.235,131.773 174.193,128.824 "/>
</g>
<g>
<polygon id="_239602760" class="fil1" points="178.809,138.853 177.548,141.685 170.467,138.532 171.728,135.7 "/>
</g>
</g>
</g>
<g>
<g>
<g>
<polygon id="_239602496" class="fil1" points="170.988,153.049 169.165,155.557 162.894,151.001 164.716,148.492 "/>
</g>
<g>
<polygon id="_239602928" class="fil1" points="166.008,159.456 163.933,161.76 158.172,156.574 160.247,154.269 "/>
</g>
<g>
<polygon id="_239584160" class="fil1" points="160.385,165.308 158.081,167.383 152.894,161.622 155.198,159.548 "/>
</g>
<g>
<polygon id="_239584424" class="fil1" points="154.182,170.54 151.673,172.363 147.117,166.092 149.626,164.269 "/>
</g>
</g>
</g>
<g>
<g>
<g>
<polygon id="_239584304" class="fil1" points="140.31,178.923 137.477,180.185 134.325,173.103 137.157,171.842 "/>
</g>
<g>
<polygon id="_239584256" class="fil1" points="132.793,181.983 129.845,182.941 127.449,175.569 130.398,174.61 "/>
</g>
<g>
<polygon id="_239583992" class="fil1" points="124.998,184.239 121.965,184.884 120.354,177.302 123.387,176.657 "/>
</g>
<g>
<polygon id="_239583776" class="fil1" points="117.01,185.669 113.926,185.993 113.116,178.284 116.2,177.96 "/>
</g>
</g>
</g>
<g>
<polygon id="_239583248" class="fil1" points="184.88,105.64 184.88,111.841 161.626,111.841 161.626,105.64 "/>
</g>
<g>
<polygon id="_239583392" class="fil1" points="176.046,144.813 172.945,150.183 156.834,140.881 159.934,135.511 "/>
</g>
<g>
<polygon id="_239583464" class="fil1" points="148.808,174.32 143.438,177.421 134.136,161.31 139.506,158.209 "/>
</g>
</g>
</g>
<g>
<g>
<g>
<g>
<g>
<polygon id="_239583440" class="fil1" points="100.805,185.993 97.7213,185.669 98.5315,177.96 101.615,178.284 "/>
</g>
<g>
<polygon id="_239583704" class="fil1" points="92.7658,184.884 89.733,184.239 91.3446,176.657 94.3774,177.302 "/>
</g>
<g>
<polygon id="_239582528" class="fil1" />
</g>
<g>
<polygon id="_239583128" class="fil1" points="77.2538,180.185 74.4213,178.923 77.5741,171.842 80.4066,173.103 "/>
</g>
</g>
</g>
<g>
<g>
<g>
<polygon id="_239582720" class="fil1" points="63.0578,172.363 60.5494,170.54 65.1056,164.269 67.614,166.092 "/>
</g>
<g>
<polygon id="_239582480" class="fil1" points="56.6503,167.383 54.3461,165.308 59.5328,159.548 61.837,161.622 "/>
</g>
<g>
<polygon id="_239582648" class="fil1" points="50.7983,161.76 48.7236,159.456 54.4841,154.269 56.5588,156.574 "/>
</g>
<g>
<polygon id="_239583080" class="fil1" points="45.5662,155.557 43.7437,153.049 50.0148,148.492 51.8373,151.001 "/>
</g>
</g>
</g>
<g>
<g>
<g>
<polygon id="_239582672" class="fil1" points="37.183,141.685 35.9219,138.853 43.0032,135.7 44.2643,138.532 "/>
</g>
<g>
<polygon id="_239564880" class="fil1" points="34.1239,134.169 33.1658,131.22 40.5379,128.825 41.496,131.773 "/>
</g>
<g>
<polygon id="_239564976" class="fil1" points="31.8672,126.373 31.2226,123.341 38.8047,121.729 39.4493,124.762 "/>
</g>
<g>
<polygon id="_239564832" class="fil1" points="30.4376,118.385 30.1135,115.302 37.8225,114.491 38.1466,117.575 "/>
</g>
</g>
</g>
<g>
<polygon id="_239564376" class="fil1" points="110.466,186.255 104.265,186.255 104.265,163.001 110.466,163.001 "/>
</g>
<g>
<polygon id="_239564304" class="fil1" points="71.2935,177.421 65.9231,174.32 75.2249,158.209 80.5953,161.31 "/>
</g>
<g>
<polygon id="_239564352" class="fil1" points="41.7862,150.183 38.6856,144.813 54.7967,135.511 57.8973,140.881 "/>
</g>
</g>
</g>
<g>
<g>
<g>
<g>
<g>
<polygon id="_239564112" class="fil1" points="30.1135,102.18 30.4376,99.0965 38.1466,99.9067 37.8225,102.99 "/>
</g>
<g>
<polygon id="_239564184" class="fil1" points="31.2225,94.141 31.8671,91.1082 39.4492,92.7198 38.8046,95.7526 "/>
</g>
<g>
<polygon id="_239564472" class="fil1" points="33.1657,86.2619 34.1238,83.3131 41.4959,85.7084 40.5378,88.6572 "/>
</g>
<g>
<polygon id="_239564664" class="fil1" points="35.9219,78.629 37.183,75.7965 44.2643,78.9493 43.0032,81.7818 "/>
</g>
</g>
</g>
<g>
<g>
<g>
<polygon id="_239441184" class="fil1" points="43.7437,64.433 45.5662,61.9246 51.8373,66.4808 50.0148,68.9892 "/>
</g>
<g>
<polygon id="_239441592" class="fil1" points="48.7236,58.0255 50.7983,55.7213 56.5588,60.908 54.4841,63.2122 "/>
</g>
<g>
<polygon id="_239441520" class="fil1" points="54.3461,52.1735 56.6503,50.0988 61.837,55.8593 59.5328,57.934 "/>
</g>
<g>
<polygon id="_239441736" class="fil1" points="60.5494,46.9414 63.0578,45.1189 67.614,51.39 65.1056,53.2125 "/>
</g>
</g>
</g>
<g>
<g>
<g>
<polygon id="_239441112" class="fil1" points="74.4213,38.5582 77.2538,37.2971 80.4066,44.3784 77.5741,45.6395 "/>
</g>
<g>
<polygon id="_239441304" class="fil1" points="81.9378,35.4991 84.8866,34.541 87.2819,41.9131 84.3331,42.8712 "/>
</g>
<g>
<polygon id="_239441424" class="fil1" points="89.733,33.2424 92.7658,32.5978 94.3774,40.1799 91.3446,40.8245 "/>
</g>
<g>
<polygon id="_239441880" class="fil1" points="97.7213,31.8128 100.805,31.4887 101.615,39.1977 98.5315,39.5218 "/>
</g>
</g>
</g>
<g>
<polygon id="_239458728" class="fil1" points="29.851,111.841 29.851,105.64 53.1054,105.64 53.1054,111.841 "/>
</g>
<g>
<polygon id="_239458584" class="fil1" points="38.6857,72.6687 41.7863,67.2983 57.8974,76.6001 54.7968,81.9705 "/>
</g>
<g>
<polygon id="_239458632" class="fil1" points="65.9231,43.1614 71.2935,40.0608 80.5953,56.1719 75.2249,59.2725 "/>
</g>
</g>
</g>
</g>
</g>
<g>
<polygon id="_239458056" class="fil1" points="66.8412,85.592 65.8423,80.2027 71.2316,79.2038 122.337,114.328 117.947,120.716 "/>
</g>
<g>
<polygon id="_239458128" class="fil1" points="161.983,65.2266 166.314,65.9125 165.628,70.2434 91.6291,124.007 87.9841,118.99 "/>
</g>
<g>
<g>
<path id="_239458080" class="fil2" d="M121.273 39.5827l0.9194 -0.597 0.597 0.9194 -4.6832 22.7785 -1.8197 -0.3868 4.9865 -22.7141zm-8.6079 39.3785l1.9713 0.419 -10.5894 52.4291 -3.0328 -0.6446 11.6509 -52.2035z"/>
<path id="_239458248" class="fil2" d="M117.358 61.7319c5.0113,1.0653 8.2298,6.0212 7.1646,11.0325 -1.0652,5.0114 -6.0212,8.2298 -11.0325,7.1646 -5.0113,-1.0651 -8.2296,-6.0211 -7.1644,-11.0324 1.0651,-5.0114 6.0211,-8.2298 11.0323,-7.1646l0 -0.0001zm-0.9669 4.5493c-2.5056,-0.5325 -4.9836,1.0767 -5.5162,3.5823 -0.5326,2.5057 1.0766,4.9837 3.5822,5.5163 2.5056,0.5325 4.9836,-1.0767 5.5162,-3.5823 0.5326,-2.5057 -1.0767,-4.9837 -3.5823,-5.5163l0.0001 0z"/>
</g>
</g>
</g>
</g>
</svg>
</body>
</html>

If I have understood your question correctly, you want to zoom into the clockface while the clockface always remains horizontally and vertically centered - is that correct?
If so, instead of using javascript, one alternative approach is to animate the clockface using the CSS scale transformation:
transform: scale([VALUE]) // a value of 1 represents normal size
Working Example:
#wrapper {
position: absolute;
top: 0px;
left: 0px;
width: 180px;
height: 180px;
background-color: green;
overflow: hidden;
}
#clock1 {
position: absolute;
width: 180px;
height: 180px;
background-color:#fff;
animation: zoomClock 4s ease-out;
}
.fill0 {fill: white;}
.fill1 {fill: black;}
.fill2 {fill: #AA0000;}
#keyframes zoomClock {
0% {transform: scale(0);}
100% {transform: scale(1);}
}
<div id="wrapper" >
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" xmlns:xlink="http://www.w3.org/1999/xlink" id="clock1">
<g>
<g>
<circle class="fill0" cx="107.366" cy="108.741" r="79.375" />
<g>
<g>
<g>
<g>
<g>
<polygon class="fill1" />
<polygon class="fill1" />
<polygon class="fill1" />
<polygon class="fill1" />
</g>
<g>
<polygon class="fill1" points="151.673,45.1189 154.182,46.9414 149.626,53.2125 147.117,51.39 "/>
<polygon class="fill1" points="158.081,50.0988 160.385,52.1735 155.198,57.934 152.894,55.8593 "/>
<polygon class="fill1" points="163.933,55.7213 166.008,58.0255 160.247,63.2122 158.172,60.908 "/>
<polygon class="fill1" points="169.165,61.9246 170.988,64.433 164.716,68.9892 162.894,66.4808 "/>
</g>
<g>
<polygon class="fill1" points="177.548,75.7965 178.809,78.629 171.728,81.7818 170.467,78.9493 "/>
<polygon class="fill1" points="180.607,83.313 181.565,86.2618 174.193,88.6571 173.235,85.7083 "/>
<polygon class="fill1" points="182.864,91.1082 183.509,94.141 175.927,95.7526 175.282,92.7198 "/>
<polygon class="fill1" points="184.294,99.0965 184.618,102.18 176.909,102.99 176.585,99.9067 "/>
</g>
<polygon class="fill1" points="104.265,31.2262 110.466,31.2262 110.466,54.4806 104.265,54.4806 "/>
<polygon class="fill1" points="143.438,40.0609 148.808,43.1615 139.506,59.2726 134.136,56.172 "/>
<polygon class="fill1" points="172.945,67.2983 176.046,72.6687 159.935,81.9705 156.834,76.6001 "/>
</g>
</g>
<g>
<g>
<g>
<polygon class="fill1" points="184.618,115.302 184.294,118.385 176.585,117.575 176.909,114.491 "/>
<polygon class="fill1" points="183.509,123.341 182.864,126.373 175.282,124.762 175.927,121.729 "/>
<polygon class="fill1" points="181.565,131.22 180.607,134.168 173.235,131.773 174.193,128.824 "/>
<polygon class="fill1" points="178.809,138.853 177.548,141.685 170.467,138.532 171.728,135.7 "/>
</g>
<g>
<polygon class="fill1" points="170.988,153.049 169.165,155.557 162.894,151.001 164.716,148.492 "/>
<polygon class="fill1" points="166.008,159.456 163.933,161.76 158.172,156.574 160.247,154.269 "/>
<polygon class="fill1" points="160.385,165.308 158.081,167.383 152.894,161.622 155.198,159.548 "/>
<polygon class="fill1" points="154.182,170.54 151.673,172.363 147.117,166.092 149.626,164.269 "/>
</g>
<g>
<polygon class="fill1" points="140.31,178.923 137.477,180.185 134.325,173.103 137.157,171.842 "/>
<polygon class="fill1" points="132.793,181.983 129.845,182.941 127.449,175.569 130.398,174.61 "/>
<polygon class="fill1" points="124.998,184.239 121.965,184.884 120.354,177.302 123.387,176.657 "/>
<polygon class="fill1" points="117.01,185.669 113.926,185.993 113.116,178.284 116.2,177.96 "/>
</g>
<polygon class="fill1" points="184.88,105.64 184.88,111.841 161.626,111.841 161.626,105.64 "/>
<polygon class="fill1" points="176.046,144.813 172.945,150.183 156.834,140.881 159.934,135.511 "/>
<polygon class="fill1" points="148.808,174.32 143.438,177.421 134.136,161.31 139.506,158.209 "/>
</g>
</g>
<g>
<g>
<g>
<polygon class="fill1" points="100.805,185.993 97.7213,185.669 98.5315,177.96 101.615,178.284 "/>
<polygon class="fill1" points="92.7658,184.884 89.733,184.239 91.3446,176.657 94.3774,177.302 "/>
<polygon class="fill1" />
<polygon class="fill1" points="77.2538,180.185 74.4213,178.923 77.5741,171.842 80.4066,173.103 "/>
</g>
<g>
<polygon class="fill1" points="63.0578,172.363 60.5494,170.54 65.1056,164.269 67.614,166.092 "/>
<polygon class="fill1" points="56.6503,167.383 54.3461,165.308 59.5328,159.548 61.837,161.622 "/>
<polygon class="fill1" points="50.7983,161.76 48.7236,159.456 54.4841,154.269 56.5588,156.574 "/>
<polygon class="fill1" points="45.5662,155.557 43.7437,153.049 50.0148,148.492 51.8373,151.001 "/>
</g>
<g>
<polygon class="fill1" points="37.183,141.685 35.9219,138.853 43.0032,135.7 44.2643,138.532 "/>
<polygon class="fill1" points="34.1239,134.169 33.1658,131.22 40.5379,128.825 41.496,131.773 "/>
<polygon class="fill1" points="31.8672,126.373 31.2226,123.341 38.8047,121.729 39.4493,124.762 "/>
<polygon class="fill1" points="30.4376,118.385 30.1135,115.302 37.8225,114.491 38.1466,117.575 "/>
</g>
<polygon class="fill1" points="110.466,186.255 104.265,186.255 104.265,163.001 110.466,163.001 "/>
<polygon class="fill1" points="71.2935,177.421 65.9231,174.32 75.2249,158.209 80.5953,161.31 "/>
<polygon class="fill1" points="41.7862,150.183 38.6856,144.813 54.7967,135.511 57.8973,140.881 "/>
</g>
</g>
<g>
<g>
<g>
<polygon class="fill1" points="30.1135,102.18 30.4376,99.0965 38.1466,99.9067 37.8225,102.99 "/>
<polygon class="fill1" points="31.2225,94.141 31.8671,91.1082 39.4492,92.7198 38.8046,95.7526 "/>
<polygon class="fill1" points="33.1657,86.2619 34.1238,83.3131 41.4959,85.7084 40.5378,88.6572 "/>
<polygon class="fill1" points="35.9219,78.629 37.183,75.7965 44.2643,78.9493 43.0032,81.7818 "/>
</g>
<g>
<polygon class="fill1" points="43.7437,64.433 45.5662,61.9246 51.8373,66.4808 50.0148,68.9892 "/>
<polygon class="fill1" points="48.7236,58.0255 50.7983,55.7213 56.5588,60.908 54.4841,63.2122 "/>
<polygon class="fill1" points="54.3461,52.1735 56.6503,50.0988 61.837,55.8593 59.5328,57.934 "/>
<polygon class="fill1" points="60.5494,46.9414 63.0578,45.1189 67.614,51.39 65.1056,53.2125 "/>
</g>
<g>
<polygon class="fill1" points="74.4213,38.5582 77.2538,37.2971 80.4066,44.3784 77.5741,45.6395 "/>
<polygon class="fill1" points="81.9378,35.4991 84.8866,34.541 87.2819,41.9131 84.3331,42.8712 "/>
<polygon class="fill1" points="89.733,33.2424 92.7658,32.5978 94.3774,40.1799 91.3446,40.8245 "/>
<polygon class="fill1" points="97.7213,31.8128 100.805,31.4887 101.615,39.1977 98.5315,39.5218 "/>
</g>
<polygon class="fill1" points="29.851,111.841 29.851,105.64 53.1054,105.64 53.1054,111.841 "/>
<polygon class="fill1" points="38.6857,72.6687 41.7863,67.2983 57.8974,76.6001 54.7968,81.9705 "/>
<polygon class="fill1" points="65.9231,43.1614 71.2935,40.0608 80.5953,56.1719 75.2249,59.2725 "/>
</g>
</g>
</g>
</g>
<polygon class="fill1" points="66.8412,85.592 65.8423,80.2027 71.2316,79.2038 122.337,114.328 117.947,120.716 "/>
<polygon class="fill1" points="161.983,65.2266 166.314,65.9125 165.628,70.2434 91.6291,124.007 87.9841,118.99 "/>
<path class="fill2" d="M121.273 39.5827l0.9194 -0.597 0.597 0.9194 -4.6832 22.7785 -1.8197 -0.3868 4.9865 -22.7141zm-8.6079 39.3785l1.9713 0.419 -10.5894 52.4291 -3.0328 -0.6446 11.6509 -52.2035z"/>
<path class="fill2" d="M117.358 61.7319c5.0113,1.0653 8.2298,6.0212 7.1646,11.0325 -1.0652,5.0114 -6.0212,8.2298 -11.0325,7.1646 -5.0113,-1.0651 -8.2296,-6.0211 -7.1644,-11.0324 1.0651,-5.0114 6.0211,-8.2298 11.0323,-7.1646l0 -0.0001zm-0.9669 4.5493c-2.5056,-0.5325 -4.9836,1.0767 -5.5162,3.5823 -0.5326,2.5057 1.0766,4.9837 3.5822,5.5163 2.5056,0.5325 4.9836,-1.0767 5.5162,-3.5823 0.5326,-2.5057 -1.0767,-4.9837 -3.5823,-5.5163l0.0001 0z"/>
</g>
</g>
</svg>
</div>

How to reference inline svg as cursor in css style?

how to reference an inline svg as cursor?
In the code attach, first cursor declaration "cursor:pointer" an second (png) works without problems.
Third declaration doesn't work for me. What I'm doing wrong?. Only need a working sample
Thanks in advance
<?xml version='1.0' encoding='UTF-8'?>
<svg version='1.1' id='project' xmlns:svg='http://www.w3.org/2000/svg'
xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink'
>
<script type='text/ecmascript'>
<style>
.boton
{
/*cursor:pointer
cursor: url(data:image/png;base64,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), auto;);
*/
cursor: url(data:image/svg+xml;utf8,<svg fill="%23FF0000" height="48" viewBox="0 0 24 24" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>), auto;);
}
</style>
</script>
<g id="toggleInsertaElementoLS" class="boton" toggleButton="true" triStateButton="false">
<path id="bordeLS" fill="url(#rellenoBotonesInsercion)" stroke="#000000" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M6.875,282.375h46c1.104,0,2,0.895,2,2v21c0,1.104-0.896,2-2,2h-46c-1.104,0-2-0.896-2-2v-21
C4.875,283.27,5.771,282.375,6.875,282.375z"/>
<g id="dibujoLS">
<path fill="#660000" stroke="#660000" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="3" d="
M22.46,296.273v-9.67h1.28v8.529h4.763v1.141H22.46z"/>
<path fill="#660000" stroke="#660000" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="3" d="
M29.59,293.156l1.209-0.104c0.055,0.479,0.188,0.881,0.398,1.188c0.207,0.313,0.533,0.563,0.973,0.752
c0.44,0.191,0.933,0.285,1.482,0.285c0.489,0,0.92-0.074,1.293-0.217c0.374-0.146,0.652-0.346,0.834-0.6
c0.182-0.25,0.276-0.527,0.276-0.826c0-0.31-0.088-0.57-0.264-0.795c-0.178-0.229-0.464-0.414-0.871-0.57
c-0.26-0.1-0.833-0.26-1.719-0.471c-0.891-0.216-1.511-0.416-1.867-0.604c-0.462-0.241-0.806-0.543-1.03-0.896
c-0.23-0.359-0.342-0.77-0.342-1.205c0-0.49,0.138-0.943,0.417-1.371c0.275-0.422,0.679-0.748,1.213-0.965
c0.532-0.229,1.124-0.332,1.775-0.332c0.716,0,1.349,0.117,1.897,0.346c0.548,0.232,0.967,0.57,1.264,1.021
c0.292,0.438,0.453,0.945,0.475,1.521l-1.227,0.09c-0.064-0.604-0.288-1.063-0.667-1.383c-0.382-0.313-0.944-0.469-1.688-0.469
c-0.772,0-1.337,0.141-1.691,0.428c-0.354,0.281-0.531,0.625-0.531,1.025c0,0.346,0.126,0.631,0.375,0.854
c0.245,0.229,0.889,0.453,1.931,0.689c1.038,0.229,1.752,0.438,2.14,0.617c0.563,0.258,0.979,0.588,1.246,0.979
c0.267,0.396,0.403,0.857,0.403,1.375c0,0.521-0.148,1.002-0.442,1.455s-0.716,0.813-1.269,1.063
c-0.554,0.256-1.172,0.383-1.864,0.383c-0.876,0-1.608-0.127-2.199-0.385c-0.593-0.262-1.056-0.646-1.392-1.148
C29.784,294.389,29.607,293.811,29.59,293.156z"/>
<line shape-rendering="geometricPrecision" fill="none" stroke="#2F5F9E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="3" x1="8" y1="301.125" x2="51.75" y2="301.125"/>
</g>
</g>
</svg>

It works once I cleaned up the syntax a little i.e. the extraneous brackets and semicolons.
The cursor is the one you provided.
.boton {
cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23FF0000" height="48" viewBox="0 0 24 24" width="48"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>'), auto;
}
<?xml version='1.0' encoding='UTF-8'?>
<svg version='1.1' id='project' xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink'
>
<rect class="boton" width="100%" height="100%" fill="blue"/>
</svg>

how to visit all the array randomly without repeating

I have a SVG with more than a 1000 polygons each 3 look like a cube. at the moment I'm changing the colour by class name. but I would like that each polygon is visited randomly without any repeating, unit all of polygons visited.
https://jsfiddle.net/MSTq/rbgmjqwd/2/
for better view please visit jsfiddle
/*
Created on : 11/03/2017, 7:01:53 PM
Author : MSTq
*/
$(document).ready(function(){
var polygons = $("#Layer_1").find("polygon");
/*var paths = $("#svg-layer-1 ").find("path");
var pathslength = paths.length;*/
var polygonslength = polygons.length;
var colorSeter = $("#curent-color-set").find(".color-set");
var byclass = [];
for(var f = 0 ; f < 9; f++){
byclass.push($("#Layer_1").find(".st" + f));
}
setInterval(function (){
var clor = rColorSet([rColor(),rColor()])[randomise(2,0)];
var rar = randomise(8,0);
var colrSeter = colorSeter[rar];
byclass[rar].css({"fill":clor,"stroke":clor});
$(colrSeter).css({"background-color":clor});
$("#" + $(colrSeter).attr("id") + " p").text(clor);
},500);
});
function isPositive (){
return arguments[0] > 0;
}
function vlidPositive (){
return isPositive(arguments[0]) ? arguments[0] : 0;
}
function comparer (){
return arguments[0] > arguments[1];
}
function reservation (r,t){
r = vlidPositive(arguments[0]), t = vlidPositive(arguments[1]);
return (r * t) / 100;
}
function randomise (max,min){
max = vlidPositive(arguments[0]),min = vlidPositive(arguments[1]);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function rColor (){
var hex = ["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"],
hexLength = hex.length -1,
limits = [[11,4],
[12,6],
[hexLength,8]],
color = "",
final = "#",
temp = "";
for (var j =0 ; j < 3; j++){
for (var i = 0 ; i < 2; i++){
temp += hex[randomise(limits[j][0] , limits[j][1])];
}
color += temp;
temp = "";
}
final += color;
return final;
}
function rColorSet(){
var colorset = [];
for (var i = 0; i < arguments.length; i++)
{
if (Array.isArray(arguments[i])){
colorset = arguments[i];
break;
}
}
return colorset;
}
/*
Created on : 11/03/2017, 7:01:53 PM
Author : MSTq
*/
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height:100px;
}
svg {
width:100%;
height:auto;
display: block;
margin: auto;
background-size:auto;
margin-top: 10px;
}
#mydiv{
width:200px;
height:200px;
background-color: #FFF0F0;
}
#curent-color-set{
width: 100%;
height:40%;
margin-bottom: 10px;
}
.color-set{
position: relative;
height: 100%;
width: 7%;
margin-left: 1%;
margin-top: 5px;
background-color: #000000;
display: inline-block;
}
.color-code{
font-size: .75em;
line-height: 34px;
}
.st0{fill:#EF4136;}
.st1{fill:#F7941E;}
.st2{fill:#00A79D;}
.st3{fill:#662D91;}
.st4{fill:#EC008C;}
.st5{fill:#F9ED32;}
.st6{fill:#8B5E3C;}
.st7{fill:#C2B59B;}
.st8{fill:#009444;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--
/*
Created on : 11/03/2017, 7:01:53 PM
Author : MSTq
*/
-->
<div id="curent-color-set">
<div id="color-0" class="color-set"><p class="color-code">#</p></div>
<div id="color-1" class="color-set"><p class="color-code">#</p></div>
<div id="color-2" class="color-set"><p class="color-code">#</p></div>
<div id="color-3" class="color-set"><p class="color-code">#</p></div>
<div id="color-4" class="color-set"><p class="color-code">#</p></div>
<div id="color-5" class="color-set"><p class="color-code">#</p></div>
<div id="color-6" class="color-set"><p class="color-code">#</p></div>
<div id="color-7" class="color-set"><p class="color-code">#</p></div>
<div id="color-8" class="color-set"><p class="color-code">#</p></div>
</div>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1920 1080" style="enable-background:new 0 0 1920 1080;" xml:space="preserve">
<g id="XMLID_32_">
<polygon id="XMLID_41_" class="st0" points="43.3,75 0,100 0,149.5 43.3,124.8 "/>
<polygon id="XMLID_40_" class="st1" points="43.3,124.8 0,149.5 0,150 43.3,175 86.6,150 43.3,125 "/>
<polygon id="XMLID_39_" class="st2" points="43.3,75 43.3,124.8 45.4,123.6 43.3,124.8 43.3,125 86.6,150 86.6,100 "/>
<polygon id="XMLID_38_" class="st3" points="129.9,75 129.9,25 86.6,0 86.6,50 "/>
<polygon id="XMLID_37_" class="st4" points="86.6,0 43.3,25 43.3,75 86.6,50 "/>
<polygon id="XMLID_36_" class="st5" points="129.9,75 86.6,50 86.6,51.8 86.6,50 43.3,75 86.6,100 "/>
<polygon id="XMLID_35_" class="st6" points="173.2,150 173.2,100 129.9,75 129.9,124.9 "/>
<polygon id="XMLID_34_" class="st7" points="129.9,124.9 129.9,125 86.6,150 129.9,175 173.2,150 173.2,150 "/>
<polygon id="XMLID_33_" class="st8" points="129.9,124.9 128.8,124.3 129.9,124.9 129.9,75 86.6,100 86.6,150 129.9,125 "/>
</g>
<g id="XMLID_122_">
<polygon id="XMLID_131_" class="st0" points="43.3,-75 0,-50 0,-0.5 43.3,-25.3 "/>
<polygon id="XMLID_130_" class="st1" points="43.3,-25.3 0,-0.5 0,0 43.3,25 86.6,0 43.3,-25 "/>
<polygon id="XMLID_129_" class="st2" points="43.3,-75 43.3,-25.3 45.4,-26.5 43.3,-25.3 43.3,-25 86.6,0 86.6,-50 "/>
<polygon id="XMLID_128_" class="st3" points="129.9,-75 129.9,-125 86.6,-150 86.6,-100 "/>
<polygon id="XMLID_127_" class="st4" points="86.6,-150 43.3,-125 43.3,-75 86.6,-100 "/>
<polygon id="XMLID_126_" class="st5" points="129.9,-75 86.6,-100 86.6,-98.2 86.6,-100 43.3,-75 86.6,-50 "/>
<polygon id="XMLID_125_" class="st6" points="173.2,-0.1 173.2,-50 129.9,-75 129.9,-25.1 "/>
<polygon id="XMLID_124_" class="st7" points="129.9,-25.1 129.9,-25 86.6,0 129.9,25 173.2,0 173.2,-0.1 "/>
<polygon id="XMLID_123_" class="st8" points="129.9,-25.1 128.8,-25.7 129.9,-25.1 129.9,-75 86.6,-50 86.6,0 129.9,-25 "/>
</g>
<g id="XMLID_2_">
<polygon id="XMLID_11_" class="st0" points="173.2,0 129.9,25 129.9,74.5 173.2,49.7 "/>
<polygon id="XMLID_10_" class="st1" points="173.2,49.7 129.9,74.5 129.9,75 173.2,100 216.5,75 173.2,50 "/>
<polygon id="XMLID_9_" class="st2" points="173.2,0 173.2,49.7 175.3,48.5 173.2,49.7 173.2,50 216.5,75 216.5,25 "/>
<polygon id="XMLID_8_" class="st3" points="259.8,0 259.8,-50 216.5,-75 216.5,-25 "/>
<polygon id="XMLID_7_" class="st4" points="216.5,-75 173.2,-50 173.2,0 216.5,-25 "/>
<polygon id="XMLID_6_" class="st5" points="259.8,0 216.5,-25 216.5,-23.2 216.5,-25 173.2,0 216.5,25 "/>
<polygon id="XMLID_5_" class="st6" points="303.1,74.9 303.1,25 259.8,0 259.8,49.9 "/>
<polygon id="XMLID_4_" class="st7" points="259.8,49.9 259.8,50 216.5,75 259.8,100 303.1,75 303.1,74.9 "/>
<polygon id="XMLID_3_" class="st8" points="259.8,49.9 258.7,49.3 259.8,49.9 259.8,0 216.5,25 216.5,75 259.8,50 "/>
</g>
<g id="XMLID_12_">
<polygon id="XMLID_21_" class="st0" points="43.3,224.5 0,249.5 0,299 43.3,274.3 "/>
<polygon id="XMLID_20_" class="st1" points="43.3,274.3 0,299 0,299.5 43.3,324.5 86.6,299.5 43.3,274.5 "/>
<polygon id="XMLID_19_" class="st2" points="43.3,224.5 43.3,274.3 45.4,273.1 43.3,274.3 43.3,274.5 86.6,299.5 86.6,249.5 "/>
<polygon id="XMLID_18_" class="st3" points="129.9,224.5 129.9,174.5 86.6,149.5 86.6,199.5 "/>
<polygon id="XMLID_17_" class="st4" points="86.6,149.5 43.3,174.5 43.3,224.5 86.6,199.5 "/>
<polygon id="XMLID_16_" class="st5" points="129.9,224.5 86.6,199.5 86.6,201.3 86.6,199.5 43.3,224.5 86.6,249.5 "/>
<polygon id="XMLID_15_" class="st6" points="173.2,299.5 173.2,249.5 129.9,224.5 129.9,274.4 "/>
<polygon id="XMLID_14_" class="st7" points="129.9,274.4 129.9,274.5 86.6,299.5 129.9,324.5 173.2,299.5 173.2,299.5 "/>
<polygon id="XMLID_13_" class="st8" points="129.9,274.4 128.8,273.8 129.9,274.4 129.9,224.5 86.6,249.5 86.6,299.5 129.9,274.5
"/>
</g>
<g id="XMLID_22_">
<polygon id="XMLID_31_" class="st0" points="-86.6,149.5 -129.9,174.5 -129.9,224 -86.6,199.3 "/>
<polygon id="XMLID_30_" class="st1" points="-86.6,199.3 -129.9,224 -129.9,224.5 -86.6,249.5 -43.3,224.5 -86.6,199.5 "/>
<polygon id="XMLID_29_" class="st2" points="-86.6,149.5 -86.6,199.3 -84.5,198.1 -86.6,199.3 -86.6,199.5 -43.3,224.5
-43.3,174.5 "/>
<polygon id="XMLID_28_" class="st3" points="0,149.5 0,99.5 -43.3,74.5 -43.3,124.5 "/>
<polygon id="XMLID_27_" class="st4" points="-43.3,74.5 -86.6,99.5 -86.6,149.5 -43.3,124.5 "/>
<polygon id="XMLID_26_" class="st5" points="0,149.5 -43.3,124.5 -43.3,126.3 -43.3,124.5 -86.6,149.5 -43.3,174.5 "/>
<polygon id="XMLID_25_" class="st6" points="43.3,224.5 43.3,174.5 0,149.5 0,199.4 "/>
<polygon id="XMLID_24_" class="st7" points="0,199.4 0,199.5 -43.3,224.5 0,249.5 43.3,224.5 43.3,224.5 "/>
<polygon id="XMLID_23_" class="st8" points="0,199.4 -1.1,198.8 0,199.4 0,149.5 -43.3,174.5 -43.3,224.5 0,199.5 "/>
</g>
<g id="XMLID_282_">
<polygon id="XMLID_291_" class="st0" points="-86.6,0 -129.9,25 -129.9,74.5 -86.6,49.8 "/>
<polygon id="XMLID_290_" class="st1" points="-86.6,49.8 -129.9,74.5 -129.9,75 -86.6,100 -43.3,75 -86.6,50 "/>
<polygon id="XMLID_289_" class="st2" points="-86.6,0 -86.6,49.8 -84.5,48.6 -86.6,49.8 -86.6,50 -43.3,75 -43.3,25 "/>
<polygon id="XMLID_288_" class="st3" points="0,0 0,-50 -43.3,-75 -43.3,-25 "/>
<polygon id="XMLID_287_" class="st4" points="-43.3,-75 -86.6,-50 -86.6,0 -43.3,-25 "/>
<polygon id="XMLID_286_" class="st5" points="0,0 -43.3,-25 -43.3,-23.2 -43.3,-25 -86.6,0 -43.3,25 "/>
<polygon id="XMLID_285_" class="st6" points="43.3,75 43.3,25 0,0 0,49.9 "/>
<polygon id="XMLID_284_" class="st7" points="0,49.9 0,50 -43.3,75 0,100 43.3,75 43.3,75 "/>
<polygon id="XMLID_283_" class="st8" points="0,49.9 -1.1,49.3 0,49.9 0,0 -43.3,25 -43.3,75 0,50 "/>
</g>
<g id="XMLID_272_">
<polygon id="XMLID_281_" class="st0" points="173.2,149.5 129.9,174.5 129.9,224 173.2,199.3 "/>
<polygon id="XMLID_280_" class="st1" points="173.2,199.3 129.9,224 129.9,224.5 173.2,249.5 216.5,224.5 173.2,199.5 "/>
<polygon id="XMLID_279_" class="st2" points="173.2,149.5 173.2,199.3 175.3,198.1 173.2,199.3 173.2,199.5 216.5,224.5
216.5,174.5 "/>
<polygon id="XMLID_278_" class="st3" points="259.8,149.5 259.8,99.5 216.5,74.5 216.5,124.5 "/>
<polygon id="XMLID_277_" class="st4" points="216.5,74.5 173.2,99.5 173.2,149.5 216.5,124.5 "/>
<polygon id="XMLID_276_" class="st5" points="259.8,149.5 216.5,124.5 216.5,126.3 216.5,124.5 173.2,149.5 216.5,174.5 "/>
<polygon id="XMLID_275_" class="st6" points="303.1,224.5 303.1,174.5 259.8,149.5 259.8,199.4 "/>
<polygon id="XMLID_274_" class="st7" points="259.8,199.4 259.8,199.5 216.5,224.5 259.8,249.5 303.1,224.5 303.1,224.5 "/>
<polygon id="XMLID_273_" class="st8" points="259.8,199.4 258.7,198.8 259.8,199.4 259.8,149.5 216.5,174.5 216.5,224.5
259.8,199.5 "/>
</g>
<g id="XMLID_102_">
<polygon id="XMLID_111_" class="st0" points="433,0 389.7,25 389.7,74.5 433,49.8 "/>
<polygon id="XMLID_110_" class="st1" points="433,49.8 389.7,74.5 389.7,75 433,100 476.3,75 433,50 "/>
<polygon id="XMLID_109_" class="st2" points="433,0 433,49.8 435.1,48.6 433,49.8 433,50 476.3,75 476.3,25 "/>
<polygon id="XMLID_108_" class="st3" points="519.6,0 519.6,-50 476.3,-75 476.3,-25 "/>
<polygon id="XMLID_107_" class="st4" points="476.3,-75 433,-50 433,0 476.3,-25 "/>
<polygon id="XMLID_106_" class="st5" points="519.6,0 476.3,-25 476.3,-23.2 476.3,-25 433,0 476.3,25 "/>
<polygon id="XMLID_105_" class="st6" points="562.9,75 562.9,25 519.6,0 519.6,49.9 "/>
<polygon id="XMLID_104_" class="st7" points="519.6,49.9 519.6,50 476.3,75 519.6,100 562.9,75 562.9,75 "/>
<polygon id="XMLID_103_" class="st8" points="519.6,49.9 518.5,49.3 519.6,49.9 519.6,0 476.3,25 476.3,75 519.6,50 "/>
</g>
<g id="XMLID_82_">
<polygon id="XMLID_91_" class="st0" points="562.9,-75 519.6,-50 519.6,-0.5 562.9,-25.3 "/>
<polygon id="XMLID_90_" class="st1" points="562.9,-25.3 519.6,-0.5 519.6,0 562.9,25 606.2,0 562.9,-25 "/>
<polygon id="XMLID_89_" class="st2" points="562.9,-75 562.9,-25.3 565,-26.5 562.9,-25.3 562.9,-25 606.2,0 606.2,-50 "/>
<polygon id="XMLID_88_" class="st3" points="649.5,-75 649.5,-125 606.2,-150 606.2,-100 "/>
<polygon id="XMLID_87_" class="st4" points="606.2,-150 562.9,-125 562.9,-75 606.2,-100 "/>
<polygon id="XMLID_86_" class="st5" points="649.5,-75 606.2,-100 606.2,-98.2 606.2,-100 562.9,-75 606.2,-50 "/>
<polygon id="XMLID_85_" class="st6" points="692.8,-0.1 692.8,-50 649.5,-75 649.5,-25.1 "/>
<polygon id="XMLID_84_" class="st7" points="649.5,-25.1 649.5,-25 606.2,0 649.5,25 692.8,0 692.8,-0.1 "/>
<polygon id="XMLID_83_" class="st8" points="649.5,-25.1 648.4,-25.7 649.5,-25.1 649.5,-75 606.2,-50 606.2,0 649.5,-25 "/>
</g>
<g id="XMLID_72_">
<polygon id="XMLID_81_" class="st0" points="433,149.5 389.7,174.5 389.7,224 433,199.3 "/>
<polygon id="XMLID_80_" class="st1" points="433,199.3 389.7,224 389.7,224.5 433,249.5 476.3,224.5 433,199.5 "/>
<polygon id="XMLID_79_" class="st2" points="433,149.5 433,199.3 435.1,198.1 433,199.3 433,199.5 476.3,224.5 476.3,174.5 "/>
<polygon id="XMLID_78_" class="st3" points="519.6,149.5 519.6,99.5 476.3,74.5 476.3,124.5 "/>
<polygon id="XMLID_77_" class="st4" points="476.3,74.5 433,99.5 433,149.5 476.3,124.5 "/>
<polygon id="XMLID_76_" class="st5" points="519.6,149.5 476.3,124.5 476.3,126.3 476.3,124.5 433,149.5 476.3,174.5 "/>
<polygon id="XMLID_75_" class="st6" points="562.9,224.5 562.9,174.5 519.6,149.5 519.6,199.4 "/>
<polygon id="XMLID_74_" class="st7" points="519.6,199.4 519.6,199.5 476.3,224.5 519.6,249.5 562.9,224.5 562.9,224.5 "/>
<polygon id="XMLID_73_" class="st8" points="519.6,199.4 518.5,198.8 519.6,199.4 519.6,149.5 476.3,174.5 476.3,224.5
519.6,199.5 "/>
</g>
<g id="XMLID_62_">
<polygon id="XMLID_71_" class="st0" points="303.1,74.5 259.8,99.5 259.8,149 303.1,124.3 "/>
<polygon id="XMLID_70_" class="st1" points="303.1,124.3 259.8,149 259.8,149.5 303.1,174.5 346.4,149.5 303.1,124.5 "/>
<polygon id="XMLID_69_" class="st2" points="303.1,74.5 303.1,124.3 305.2,123.1 303.1,124.3 303.1,124.5 346.4,149.5 346.4,99.5
"/>
<polygon id="XMLID_68_" class="st3" points="389.7,74.5 389.7,24.5 346.4,-0.5 346.4,49.5 "/>
<polygon id="XMLID_67_" class="st4" points="346.4,-0.5 303.1,24.5 303.1,74.5 346.4,49.5 "/>
<polygon id="XMLID_66_" class="st5" points="389.7,74.5 346.4,49.5 346.4,51.3 346.4,49.5 303.1,74.5 346.4,99.5 "/>
<polygon id="XMLID_65_" class="st6" points="433,149.5 433,99.5 389.7,74.5 389.7,124.4 "/>
<polygon id="XMLID_64_" class="st7" points="389.7,124.4 389.7,124.5 346.4,149.5 389.7,174.5 433,149.5 433,149.5 "/>
<polygon id="XMLID_63_" class="st8" points="389.7,124.4 388.6,123.8 389.7,124.4 389.7,74.5 346.4,99.5 346.4,149.5 389.7,124.5
"/>
</g>
<g id="XMLID_52_">
<polygon id="XMLID_61_" class="st0" points="303.1,-75 259.8,-50 259.8,-0.5 303.1,-25.2 "/>
<polygon id="XMLID_60_" class="st1" points="303.1,-25.2 259.8,-0.5 259.8,0 303.1,25 346.4,0 303.1,-25 "/>
<polygon id="XMLID_59_" class="st2" points="303.1,-75 303.1,-25.2 305.2,-26.4 303.1,-25.2 303.1,-25 346.4,0 346.4,-50 "/>
<polygon id="XMLID_58_" class="st3" points="389.7,-75 389.7,-125 346.4,-150 346.4,-100 "/>
<polygon id="XMLID_57_" class="st4" points="346.4,-150 303.1,-125 303.1,-75 346.4,-100 "/>
<polygon id="XMLID_56_" class="st5" points="389.7,-75 346.4,-100 346.4,-98.2 346.4,-100 303.1,-75 346.4,-50 "/>
<polygon id="XMLID_55_" class="st6" points="433,0 433,-50 389.7,-75 389.7,-25.1 "/>
<polygon id="XMLID_54_" class="st7" points="389.7,-25.1 389.7,-25 346.4,0 389.7,25 433,0 433,0 "/>
<polygon id="XMLID_53_" class="st8" points="389.7,-25.1 388.6,-25.7 389.7,-25.1 389.7,-75 346.4,-50 346.4,0 389.7,-25 "/>
</g>
<g id="XMLID_42_">
<polygon id="XMLID_51_" class="st0" points="562.9,74.5 519.6,99.5 519.6,149 562.9,124.3 "/>
<polygon id="XMLID_50_" class="st1" points="562.9,124.3 519.6,149 519.6,149.5 562.9,174.5 606.2,149.5 562.9,124.5 "/>
<polygon id="XMLID_49_" class="st2" points="562.9,74.5 562.9,124.3 565,123.1 562.9,124.3 562.9,124.5 606.2,149.5 606.2,99.5
"/>
<polygon id="XMLID_48_" class="st3" points="649.5,74.5 649.5,24.5 606.2,-0.5 606.2,49.5 "/>
<polygon id="XMLID_47_" class="st4" points="606.2,-0.5 562.9,24.5 562.9,74.5 606.2,49.5 "/>
<polygon id="XMLID_46_" class="st5" points="649.5,74.5 606.2,49.5 606.2,51.3 606.2,49.5 562.9,74.5 606.2,99.5 "/>
<polygon id="XMLID_45_" class="st6" points="692.8,149.5 692.8,99.5 649.5,74.5 649.5,124.4 "/>
<polygon id="XMLID_44_" class="st7" points="649.5,124.4 649.5,124.5 606.2,149.5 649.5,174.5 692.8,149.5 692.8,149.5 "/>
<polygon id="XMLID_43_" class="st8" points="649.5,124.4 648.4,123.8 649.5,124.4 649.5,74.5 606.2,99.5 606.2,149.5 649.5,124.5
"/>
</g>
<g id="XMLID_182_">
<polygon id="XMLID_191_" class="st0" points="303.1,375 259.8,400 259.8,449.6 303.1,424.8 "/>
<polygon id="XMLID_190_" class="st1" points="303.1,424.8 259.8,449.6 259.8,450 303.1,475 346.4,450 303.1,425 "/>
<polygon id="XMLID_189_" class="st2" points="303.1,375 303.1,424.8 305.2,423.6 303.1,424.8 303.1,425 346.4,450 346.4,400 "/>
<polygon id="XMLID_188_" class="st3" points="389.7,375 389.7,325 346.4,300 346.4,350 "/>
<polygon id="XMLID_187_" class="st4" points="346.4,300 303.1,325 303.1,375 346.4,350 "/>
<polygon id="XMLID_186_" class="st5" points="389.7,375 346.4,350 346.4,351.8 346.4,350 303.1,375 346.4,400 "/>
<polygon id="XMLID_185_" class="st6" points="433,450 433,400 389.7,375 389.7,425 "/>
<polygon id="XMLID_184_" class="st7" points="389.7,425 389.7,425 346.4,450 389.7,475 433,450 433,450 "/>
<polygon id="XMLID_183_" class="st8" points="389.7,425 388.6,424.3 389.7,425 389.7,375 346.4,400 346.4,450 389.7,425 "/>
</g>
<g id="XMLID_172_">
<polygon id="XMLID_181_" class="st0" points="303.1,225 259.8,250 259.8,299.5 303.1,274.8 "/>
<polygon id="XMLID_180_" class="st1" points="303.1,274.8 259.8,299.5 259.8,300 303.1,325 346.4,300 303.1,275 "/>
<polygon id="XMLID_179_" class="st2" points="303.1,225 303.1,274.8 305.2,273.6 303.1,274.8 303.1,275 346.4,300 346.4,250 "/>
<polygon id="XMLID_178_" class="st3" points="389.7,225 389.7,175 346.4,150 346.4,200 "/>
<polygon id="XMLID_177_" class="st4" points="346.4,150 303.1,175 303.1,225 346.4,200 "/>
<polygon id="XMLID_176_" class="st5" points="389.7,225 346.4,200 346.4,201.8 346.4,200 303.1,225 346.4,250 "/>
<polygon id="XMLID_175_" class="st6" points="433,300 433,250 389.7,225 389.7,274.9 "/>
<polygon id="XMLID_174_" class="st7" points="389.7,274.9 389.7,275 346.4,300 389.7,325 433,300 433,300 "/>
<polygon id="XMLID_173_" class="st8" points="389.7,274.9 388.6,274.3 389.7,274.9 389.7,225 346.4,250 346.4,300 389.7,275 "/>
</g>
<g id="XMLID_162_">
<polygon id="XMLID_171_" class="st0" points="433,300 389.7,325 389.7,374.5 433,349.8 "/>
<polygon id="XMLID_170_" class="st1" points="433,349.8 389.7,374.5 389.7,375 433,400 476.3,375 433,350 "/>
<polygon id="XMLID_169_" class="st2" points="433,300 433,349.8 435.1,348.6 433,349.8 433,350 476.3,375 476.3,325 "/>
<polygon id="XMLID_168_" class="st3" points="519.6,300 519.6,250 476.3,225 476.3,275 "/>
<polygon id="XMLID_167_" class="st4" points="476.3,225 433,250 433,300 476.3,275 "/>
<polygon id="XMLID_166_" class="st5" points="519.6,300 476.3,275 476.3,276.8 476.3,275 433,300 476.3,325 "/>
<polygon id="XMLID_165_" class="st6" points="562.9,375 562.9,325 519.6,300 519.6,349.9 "/>
<polygon id="XMLID_164_" class="st7" points="519.6,349.9 519.6,350 476.3,375 519.6,400 562.9,375 562.9,375 "/>
<polygon id="XMLID_163_" class="st8" points="519.6,349.9 518.5,349.3 519.6,349.9 519.6,300 476.3,325 476.3,375 519.6,350 "/>
</g>
<g id="XMLID_152_">
<polygon id="XMLID_161_" class="st0" points="303.1,524.5 259.8,549.5 259.8,599.1 303.1,574.3 "/>
<polygon id="XMLID_160_" class="st1" points="303.1,574.3 259.8,599.1 259.8,599.5 303.1,624.5 346.4,599.5 303.1,574.5 "/>
<polygon id="XMLID_159_" class="st2" points="303.1,524.5 303.1,574.3 305.2,573.1 303.1,574.3 303.1,574.5 346.4,599.5
346.4,549.5 "/>
<polygon id="XMLID_158_" class="st3" points="389.7,524.5 389.7,474.5 346.4,449.5 346.4,499.5 "/>
<polygon id="XMLID_157_" class="st4" points="346.4,449.5 303.1,474.5 303.1,524.5 346.4,499.5 "/>
<polygon id="XMLID_156_" class="st5" points="389.7,524.5 346.4,499.5 346.4,501.3 346.4,499.5 303.1,524.5 346.4,549.5 "/>
<polygon id="XMLID_155_" class="st6" points="433,599.5 433,549.5 389.7,524.5 389.7,574.5 "/>
<polygon id="XMLID_154_" class="st7" points="389.7,574.5 389.7,574.5 346.4,599.5 389.7,624.5 433,599.5 433,599.5 "/>
<polygon id="XMLID_153_" class="st8" points="389.7,574.5 388.6,573.8 389.7,574.5 389.7,524.5 346.4,549.5 346.4,599.5
389.7,574.5 "/>
</g>
<g id="XMLID_142_">
<polygon id="XMLID_151_" class="st0" points="173.2,449.5 129.9,474.5 129.9,524.1 173.2,499.3 "/>
<polygon id="XMLID_150_" class="st1" points="173.2,499.3 129.9,524.1 129.9,524.5 173.2,549.5 216.5,524.5 173.2,499.5 "/>
<polygon id="XMLID_149_" class="st2" points="173.2,449.5 173.2,499.3 175.3,498.1 173.2,499.3 173.2,499.5 216.5,524.5
216.5,474.5 "/>
<polygon id="XMLID_148_" class="st3" points="259.8,449.5 259.8,399.5 216.5,374.5 216.5,424.5 "/>
<polygon id="XMLID_147_" class="st4" points="216.5,374.5 173.2,399.5 173.2,449.5 216.5,424.5 "/>
<polygon id="XMLID_146_" class="st5" points="259.8,449.5 216.5,424.5 216.5,426.3 216.5,424.5 173.2,449.5 216.5,474.5 "/>
<polygon id="XMLID_145_" class="st6" points="303.1,524.5 303.1,474.5 259.8,449.5 259.8,499.5 "/>
<polygon id="XMLID_144_" class="st7" points="259.8,499.5 259.8,499.5 216.5,524.5 259.8,549.5 303.1,524.5 303.1,524.5 "/>
<polygon id="XMLID_143_" class="st8" points="259.8,499.5 258.7,498.8 259.8,499.5 259.8,449.5 216.5,474.5 216.5,524.5
259.8,499.5 "/>
</g>
<g id="XMLID_132_">
<polygon id="XMLID_141_" class="st0" points="173.2,300 129.9,325 129.9,374.6 173.2,349.8 "/>
<polygon id="XMLID_140_" class="st1" points="173.2,349.8 129.9,374.6 129.9,375 173.2,400 216.5,375 173.2,350 "/>
<polygon id="XMLID_139_" class="st2" points="173.2,300 173.2,349.8 175.3,348.6 173.2,349.8 173.2,350 216.5,375 216.5,325 "/>
<polygon id="XMLID_138_" class="st3" points="259.8,300 259.8,250 216.5,225 216.5,275 "/>
<polygon id="XMLID_137_" class="st4" points="216.5,225 173.2,250 173.2,300 216.5,275 "/>
<polygon id="XMLID_136_" class="st5" points="259.8,300 216.5,275 216.5,276.8 216.5,275 173.2,300 216.5,325 "/>
<polygon id="XMLID_135_" class="st6" points="303.1,375 303.1,325 259.8,300 259.8,350 "/>
<polygon id="XMLID_134_" class="st7" points="259.8,350 259.8,350 216.5,375 259.8,400 303.1,375 303.1,375 "/>
<polygon id="XMLID_133_" class="st8" points="259.8,350 258.7,349.3 259.8,350 259.8,300 216.5,325 216.5,375 259.8,350 "/>
</g>
<g id="XMLID_112_">
<polygon id="XMLID_121_" class="st0" points="433,449.5 389.7,474.5 389.7,524.1 433,499.3 "/>
<polygon id="XMLID_120_" class="st1" points="433,499.3 389.7,524.1 389.7,524.5 433,549.5 476.3,524.5 433,499.5 "/>
<polygon id="XMLID_119_" class="st2" points="433,449.5 433,499.3 435.1,498.1 433,499.3 433,499.5 476.3,524.5 476.3,474.5 "/>
<polygon id="XMLID_118_" class="st3" points="519.6,449.5 519.6,399.5 476.3,374.5 476.3,424.5 "/>
<polygon id="XMLID_117_" class="st4" points="476.3,374.5 433,399.5 433,449.5 476.3,424.5 "/>
<polygon id="XMLID_116_" class="st5" points="519.6,449.5 476.3,424.5 476.3,426.3 476.3,424.5 433,449.5 476.3,474.5 "/>
<polygon id="XMLID_115_" class="st6" points="562.9,524.5 562.9,474.5 519.6,449.5 519.6,499.5 "/>
<polygon id="XMLID_114_" class="st7" points="519.6,499.5 519.6,499.5 476.3,524.5 519.6,549.5 562.9,524.5 562.9,524.5 "/>
<polygon id="XMLID_113_" class="st8" points="519.6,499.5 518.5,498.8 519.6,499.5 519.6,449.5 476.3,474.5 476.3,524.5
519.6,499.5 "/>
</g>
<g id="XMLID_252_">
<polygon id="XMLID_261_" class="st0" points="-86.6,449.5 -129.9,474.5 -129.9,524.1 -86.6,499.3 "/>
<polygon id="XMLID_260_" class="st1" points="-86.6,499.3 -129.9,524.1 -129.9,524.5 -86.6,549.5 -43.3,524.5 -86.6,499.5 "/>
<polygon id="XMLID_259_" class="st2" points="-86.6,449.5 -86.6,499.3 -84.5,498.1 -86.6,499.3 -86.6,499.5 -43.3,524.5
-43.3,474.5 "/>
<polygon id="XMLID_258_" class="st3" points="0,449.5 0,399.5 -43.3,374.5 -43.3,424.5 "/>
<polygon id="XMLID_257_" class="st4" points="-43.3,374.5 -86.6,399.5 -86.6,449.5 -43.3,424.5 "/>
<polygon id="XMLID_256_" class="st5" points="0,449.5 -43.3,424.5 -43.3,426.3 -43.3,424.5 -86.6,449.5 -43.3,474.5 "/>
<polygon id="XMLID_255_" class="st6" points="43.3,524.5 43.3,474.5 0,449.5 0,499.5 "/>
<polygon id="XMLID_254_" class="st7" points="0,499.5 0,499.5 -43.3,524.5 0,549.5 43.3,524.5 43.3,524.5 "/>
<polygon id="XMLID_253_" class="st8" points="0,499.5 -1.1,498.8 0,499.5 0,449.5 -43.3,474.5 -43.3,524.5 0,499.5 "/>
</g>
</svg>

It looks like the polygons have unique ids? For example: XMLID_121_
If so, maybe you could do something like this:
1) Put all of the polygon ids in an array
2) randomly visit a location in the array
3) do something with the element in that array location ("visit the polygon with that id", etc.)
4) extract the visited array element from the array
5) keep doing this until there are no elements left in the id array.
Here is a simple JavaScript program to that effect:
var polygonIds = [1, 2, 3, 4, 5]; //the order doesn't matter
while (polygonIds.length > 0) { //repeat until no more elements left
var position = Math.floor(Math.random() * polygonIds.length); //choose random location
var extracted = polygonIds[position]; //get that element
alert(extracted); //do whatever you want to do with the extracted element
polygonIds.splice(position, 1); //remove the element from array
}
Maybe there is a better way to do this. But it seems reasonable, and it looks like you are using JavaScript. So something like this might work for you.

snapsvg - Move path to cursor pointer

I have a complex SVG with multiple paths. I'm trying to the change the path data (d) of the paths to match the position of the cursor so when the user mouseover the svg, they move toward the pointer.
What seem like a simple animation feels more like nightmare considering I'm not sure about my approach and choice of tools.
Here is my SVG:
<svg version="1.1" id="graph" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 222 246.6" style="enable-background:new 0 0 222 246.6;" xml:space="preserve">
<style type="text/css">
.st0{clip-path:url(#SVGID_2_);fill:#52B3F5;}
.st1{clip-path:url(#SVGID_2_);fill:#8FDAFF;}
.st2{clip-path:url(#SVGID_2_);fill:#0468FF;}
.st3{clip-path:url(#SVGID_2_);fill:none;stroke:#0468FF;stroke-miterlimit:10;}
.st4{clip-path:url(#SVGID_2_);fill:none;stroke:#8FDAFF;stroke-miterlimit:10;}
.st5{clip-path:url(#SVGID_2_);fill:none;stroke:#52B3F5;stroke-miterlimit:10;}
</style>
<g>
<defs>
<rect id="SVGID_1_" width="222" height="246.6"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" style="overflow:visible;"/>
</clipPath>
<path class="st0" d="M222,233.8c0,3.2-2.6,5.8-5.8,5.8c-3.2,0-5.8-2.6-5.8-5.8c0-3.2,2.6-5.8,5.8-5.8
C219.4,228,222,230.6,222,233.8"/>
<path class="st0" d="M105.2,150c0,2.1-1.7,3.7-3.7,3.7c-2.1,0-3.7-1.7-3.7-3.7c0-2.1,1.7-3.7,3.7-3.7
C103.5,146.2,105.2,147.9,105.2,150"/>
<path class="st0" d="M34.4,21.1c0,2.5-2,4.5-4.5,4.5s-4.4-2-4.4-4.5c0-2.5,2-4.4,4.4-4.4S34.4,18.6,34.4,21.1"/>
<path class="st1" d="M110.5,207.1c0,3.3-2.7,5.9-5.9,5.9c-3.3,0-5.9-2.7-5.9-5.9c0-3.3,2.7-5.9,5.9-5.9
C107.8,201.2,110.5,203.9,110.5,207.1"/>
<path class="st2" d="M128.4,207.1c0,3.9-3.2,7.1-7.1,7.1c-3.9,0-7.1-3.2-7.1-7.1c0-3.9,3.2-7.1,7.1-7.1
C125.3,200.1,128.4,203.2,128.4,207.1"/>
<path class="st2" d="M22.7,240.8c0,3.2-2.6,5.8-5.8,5.8c-3.2,0-5.8-2.6-5.8-5.8c0-3.2,2.6-5.8,5.8-5.8
C20.1,235,22.7,237.6,22.7,240.8"/>
<path class="st0" d="M9.2,232.7c0,2.6-2.1,4.6-4.6,4.6S0,235.3,0,232.7s2.1-4.6,4.6-4.6S9.2,230.1,9.2,232.7"/>
<polygon class="st3" points="148.1,105.2 106.2,207.1 120.5,207.1 155.4,122.2 "/>
<path class="st2" d="M202.5,23.5c0,3.1-2.5,5.7-5.7,5.7s-5.7-2.5-5.7-5.7c0-3.1,2.5-5.7,5.7-5.7S202.5,20.4,202.5,23.5"/>
<path class="st2" d="M188.7,17.5c0,1.9-1.5,3.4-3.4,3.4c-1.9,0-3.4-1.5-3.4-3.4c0-1.9,1.5-3.4,3.4-3.4
C187.2,14.1,188.7,15.6,188.7,17.5"/>
<polygon class="st3" points="184.4,17.1 106.2,207.1 120.5,207.1 196,23.4 194.2,22.4 "/>
<polygon class="st4" points="39.4,17 29.5,22.4 27.7,23.3 103.3,207.1 106.3,207.1 117.6,207.1 "/>
<polygon class="st3" points="118.7,5.6 105.9,5.6 103.2,5.6 5.8,234.2 6.4,234.6 16,241.4 "/>
<polygon class="st5" points="17.3,242.7 121.4,149.5 111.7,140.8 6.3,234.6 9.2,236.7 "/>
<polygon class="st5" points="217.3,234.1 111.7,140.8 101.9,149.5 205.8,242.5 206.4,242.1 "/>
<polygon class="st4" points="217.3,234.1 120.3,5.6 105.8,5.6 206.4,242.1 "/>
<polygon class="st5" points="181.8,15.6 102,87.3 111.7,96.1 194.2,22.4 "/>
<polygon class="st5" points="41.7,15.7 29.5,22.4 111.7,96.1 121.6,87.3 "/>
<path class="st0" d="M46.9,17.7c0,3-2.4,5.3-5.3,5.3c-3,0-5.3-2.4-5.3-5.3c0-3,2.4-5.3,5.3-5.3C44.5,12.3,46.9,14.7,46.9,17.7"/>
<path class="st1" d="M44.2,20.7c0,1.7-1.4,3.1-3.1,3.1s-3.1-1.4-3.1-3.1c0-1.7,1.4-3.1,3.1-3.1S44.2,19,44.2,20.7"/>
<path class="st1" d="M31.4,22.3c0,1.5-1.2,2.7-2.7,2.7S26,23.8,26,22.3c0-1.5,1.2-2.7,2.7-2.7S31.4,20.8,31.4,22.3"/>
<path class="st2" d="M105,5.6c0,2.1-1.7,3.8-3.8,3.8c-2.1,0-3.8-1.7-3.8-3.8c0-2.1,1.7-3.8,3.8-3.8C103.3,1.9,105,3.5,105,5.6"/>
<path class="st2" d="M124.3,5.6c0,3.1-2.5,5.6-5.6,5.6c-3.1,0-5.6-2.5-5.6-5.6c0-3.1,2.5-5.6,5.6-5.6C121.8,0,124.3,2.5,124.3,5.6"
/>
<path class="st1" d="M123.6,5.6c0,1.7-1.4,3.1-3.1,3.1c-1.7,0-3.1-1.4-3.1-3.1c0-1.7,1.4-3.1,3.1-3.1
C122.2,2.5,123.6,3.9,123.6,5.6"/>
<path class="st0" d="M186.2,15.7c0,2.5-2.1,4.6-4.6,4.6s-4.6-2.1-4.6-4.6c0-2.5,2.1-4.6,4.6-4.6S186.2,13.2,186.2,15.7"/>
<path class="st0" d="M197.8,22.4c0,2.1-1.7,3.8-3.8,3.8c-2.1,0-3.8-1.7-3.8-3.8c0-2.1,1.7-3.8,3.8-3.8
C196.1,18.7,197.8,20.3,197.8,22.4"/>
<path class="st0" d="M199.4,22.4c0,2.9-2.4,5.3-5.3,5.3c-2.9,0-5.3-2.4-5.3-5.3c0-2.9,2.4-5.3,5.3-5.3
C197,17.1,199.4,19.5,199.4,22.4"/>
<path class="st1" d="M111.4,5.6c0,3.1-2.5,5.6-5.6,5.6c-3.1,0-5.6-2.5-5.6-5.6c0-3.1,2.5-5.6,5.6-5.6C108.9,0,111.4,2.5,111.4,5.6"
/>
<path class="st0" d="M142.4,52.6c0,1.1-0.9,2.1-2.1,2.1c-1.1,0-2.1-0.9-2.1-2.1c0-1.1,0.9-2.1,2.1-2.1
C141.5,50.5,142.4,51.5,142.4,52.6"/>
<path class="st1" d="M132.9,61.7c0,1.6-1.3,3-3,3c-1.6,0-3-1.3-3-3c0-1.6,1.3-3,3-3C131.5,58.8,132.9,60.1,132.9,61.7"/>
<path class="st0" d="M149.1,65.5c0,2-1.7,3.7-3.7,3.7s-3.7-1.7-3.7-3.7c0-2,1.7-3.7,3.7-3.7S149.1,63.4,149.1,65.5"/>
<path class="st1" d="M140.2,75.1c0,2.9-2.3,5.2-5.2,5.2c-2.9,0-5.2-2.3-5.2-5.2c0-2.9,2.3-5.2,5.2-5.2
C137.9,69.9,140.2,72.2,140.2,75.1"/>
<path class="st1" d="M221,233.8c0,2.1-1.7,3.8-3.8,3.8c-2.1,0-3.8-1.7-3.8-3.8s1.7-3.8,3.8-3.8C219.4,230.1,221,231.7,221,233.8"/>
<path class="st1" d="M209.5,240.7c0,2.1-1.7,3.8-3.8,3.8c-2.1,0-3.8-1.7-3.8-3.8s1.7-3.8,3.8-3.8
C207.8,237,209.5,238.7,209.5,240.7"/>
<path class="st2" d="M85,52.6c0,1.1-0.9,1.9-1.9,1.9c-1.1,0-1.9-0.9-1.9-1.9c0-1.1,0.9-1.9,1.9-1.9C84.2,50.7,85,51.5,85,52.6"/>
<path class="st2" d="M96.1,62c0,1.5-1.2,2.7-2.7,2.7c-1.5,0-2.7-1.2-2.7-2.7c0-1.5,1.2-2.7,2.7-2.7C94.9,59.3,96.1,60.5,96.1,62"/>
<path class="st2" d="M9.2,233.7c0,1.6-1.3,2.9-2.9,2.9s-2.9-1.3-2.9-2.9c0-1.6,1.3-2.9,2.9-2.9S9.2,232.1,9.2,233.7"/>
<path class="st0" d="M82.7,65.7c0,2.6-2.1,4.7-4.7,4.7c-2.6,0-4.7-2.1-4.7-4.7c0-2.6,2.1-4.7,4.7-4.7C80.5,61,82.7,63.1,82.7,65.7"
/>
<path class="st0" d="M90.1,75.1c0,1-0.8,1.9-1.9,1.9c-1,0-1.9-0.8-1.9-1.9c0-1,0.8-1.9,1.9-1.9C89.3,73.2,90.1,74.1,90.1,75.1"/>
<path class="st2" d="M150.4,105.2c0,1.5-1.2,2.7-2.7,2.7c-1.5,0-2.7-1.2-2.7-2.7c0-1.5,1.2-2.7,2.7-2.7
C149.2,102.6,150.4,103.8,150.4,105.2"/>
<path class="st2" d="M159.7,123c0,2.2-1.8,4-4,4c-2.2,0-4-1.8-4-4c0-2.2,1.8-4,4-4C157.9,119,159.7,120.7,159.7,123"/>
<path class="st1" d="M159.2,88c0,2.2-1.8,4-4,4c-2.2,0-4-1.8-4-4c0-2.2,1.8-4,4-4C157.4,83.9,159.2,85.7,159.2,88"/>
<path class="st1" d="M165.2,105.7c0,1.5-1.2,2.7-2.7,2.7c-1.5,0-2.7-1.2-2.7-2.7c0-1.5,1.2-2.7,2.7-2.7
C164,103.1,165.2,104.2,165.2,105.7"/>
<path class="st2" d="M79.9,104.1c0,2.4-1.9,4.3-4.3,4.3c-2.4,0-4.3-1.9-4.3-4.3c0-2.4,1.9-4.3,4.3-4.3
C78,99.7,79.9,101.7,79.9,104.1"/>
<path class="st2" d="M109.8,207.1c0,2-1.6,3.6-3.6,3.6c-2,0-3.6-1.6-3.6-3.6c0-2,1.6-3.6,3.6-3.6
C108.2,203.5,109.8,205.2,109.8,207.1"/>
<path class="st2" d="M71,86.7c0,1.6-1.3,2.9-2.9,2.9s-2.9-1.3-2.9-2.9c0-1.6,1.3-2.9,2.9-2.9S71,85.1,71,86.7"/>
<path class="st0" d="M22.7,240.8c0,2-1.7,3.7-3.7,3.7s-3.7-1.7-3.7-3.7c0-2.1,1.7-3.7,3.7-3.7S22.7,238.7,22.7,240.8"/>
<path class="st1" d="M123.7,207.1c0,2.8-2.2,5-5,5c-2.8,0-5-2.2-5-5c0-2.8,2.2-5,5-5C121.4,202.1,123.7,204.4,123.7,207.1"/>
<path class="st0" d="M114.3,140.8c0,1.7-1.4,3.1-3.1,3.1s-3.1-1.4-3.1-3.1c0-1.7,1.4-3.1,3.1-3.1S114.3,139.1,114.3,140.8"/>
<path class="st0" d="M104.6,168c0,1.7-1.4,3.1-3.1,3.1c-1.7,0-3.1-1.4-3.1-3.1c0-1.7,1.4-3.1,3.1-3.1
C103.2,164.9,104.6,166.3,104.6,168"/>
<path class="st1" d="M94.7,176.6c0,2.2-1.8,4-4,4c-2.2,0-4-1.8-4-4s1.8-4,4-4C92.9,172.7,94.7,174.4,94.7,176.6"/>
<path class="st2" d="M121,168c0,0.9,0.7,1.6,1.6,1.6c0.9,0,1.6-0.7,1.6-1.6c0-0.9-0.7-1.6-1.6-1.6C121.7,166.4,121,167.1,121,168"
/>
<path class="st0" d="M136,164.1c0,1.3,1,2.3,2.3,2.3c1.3,0,2.3-1,2.3-2.3c0-1.3-1-2.3-2.3-2.3C137,161.8,136,162.8,136,164.1"/>
<path class="st2" d="M127.5,176.6c0,3.3,2.6,5.9,5.9,5.9c3.3,0,5.9-2.6,5.9-5.9c0-3.3-2.6-5.9-5.9-5.9
C130.1,170.7,127.5,173.4,127.5,176.6"/>
<path class="st0" d="M125.6,150.1c0,2.7-2.2,5-5,5c-2.7,0-5-2.2-5-5c0-2.7,2.2-5,5-5C123.4,145.2,125.6,147.4,125.6,150.1"/>
<path class="st1" d="M103.9,154.9c0,3.8-3.1,6.9-6.9,6.9c-3.8,0-6.9-3.1-6.9-6.9c0-3.8,3.1-6.9,6.9-6.9
C100.8,148,103.9,151.1,103.9,154.9"/>
<path class="st0" d="M207.3,239.1c0,1.8-1.5,3.3-3.3,3.3s-3.3-1.5-3.3-3.3s1.5-3.3,3.3-3.3S207.3,237.3,207.3,239.1"/>
</g>
</svg>
And my full, completely failed attempt can be found here
I guess the real question would be how to find the "d" endpoint of the mouse cursor so I can assign it to the paths.

cx and cy are for circles and ellipses. And you don't need to modify the d attribute for paths either.
All you need to do to move any element is apply a translate transform. Ie:
<path ... transform="translate(20, 20)">
In Snap you can use the Element.transform() function to apply a transform.
Here's a demo where I move each path towards the pointer a little bit every time you move the pointer.
function moveFunc( ev, x, y ) {
//console.log(ev);
paths.forEach(function(el) {
// Convert screen mouse coords to the equivalent point in SVG coords
var pt = cursorPoint(x, y);
// Get the "center" of each path by way of its bounding box
var b = el.getBBox();
var cx = b.x + b.width/2;
var cy = b.y + b.height/2;
// Get the direction vector from the path center to the pointer location
var dx = pt.x - cx;
var dy = pt.y - cy;
// Get the current transform (if any) on the path
var currentTransform = el.transform().localMatrix;
// Add the tranlation that moves the paths a little toward the pointer
currentTransform = currentTransform.translate(dx/20, dy/20);
el.transform(currentTransform);
});
}
// Convert a screen space coordinate to an SVG coordinate
function cursorPoint(x, y) {
var svg = s.node;
var pt = svg.createSVGPoint();
pt.x = x; pt.y = y;
return pt.matrixTransform(svg.getScreenCTM().inverse());
}
Hopefully this is enough to get you started. To move the <polygon> points, you'll need to get the array of points and then update each point in the array by adding dx,dy.
You can get the points of a polygon using el.node.points.
Good luck!