]
I am trying to create a map that shows what states have One Health Programs. The dark grey states are states that do have these programs. I want a popover to appear right next to the state when you hover over a state that has a One Health Program. The box contains the name of the state as well as links One Health Programs within that state. So far, I've got the states that have these programs filled in darker, then when you hover over them they turn red. I want them to turn red and show a box next to them with the details while staying red when you hover over the details box. The pictures are examples of how I would like to see it look. How do I do this?
Here is a link to my codepen file: http://codepen.io/aahmed2/pen/vGwNXv
And here is the code
<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"
width="90%" height="90%" viewBox="273.184 734.576 100 100" enable-background="new 273.184 734.576 100 100"
xml:space="preserve">
<!--States with that have One Health Programs should also be given the class of "has" to indicate that that state has a One Health Program. Along with giving that state the class of has, you must change the fill color to #333332 to change the color of that state on the map.-->
<path class="alabama" fill="#c1c0be" d="M345.738,785.184l-1.271-3.02l-0.785-2.667l-1.855,0.309c-0.088,0.013-1.99,0.284-2.496,0.318l0.158,6.178
l0.314,3.933h0.867l0.725-0.437l-0.076-0.206l-0.416-1.106l0,0v-0.002l0.104-0.015l2.078-0.319l2.646-0.311l-0.311-1.701
L345.738,785.184z"/>
<polygon class="arizona" fill="#c1c0be" points="302.422,774.979 294.079,773.404 293.931,774.445 293.933,775.298 293.175,775.487 292.847,774.994
292.335,774.994 292.491,776.86 292.178,777.33 292.825,778.95 292.008,779.604 292.008,780.242 291.365,780.883 291.365,781.441
291.686,781.602 291.686,782.195 291.02,782.362 290.908,782.583 297.248,786.388 301,787.013 302.424,774.985 302.422,774.985 "/>
<polygon class="has arkansas" fill="#333332" points="334.035,783.103 334.031,783.074 334.996,781.627 334.996,780.649 335.639,780.168 335.639,779.061
335.951,778.592 335.809,778.166 335.469,777.826 335.615,777.24 334.453,777.24 334.133,777.4 331.869,777.4 327.777,777.559
327.777,777.802 327.938,779.236 328.098,780.032 328.256,783.657 329.061,783.657 329.061,784.94 332.346,784.94 334.146,784.79
"/>
<polygon class="has california" fill="#333332" points="284.942,766.265 286.696,760.366 280.448,758.023 280.286,759.716 279.636,760.854 279.174,761.162
279.174,762.049 279.495,762.369 279.495,763.398 279.174,763.719 279.174,765.262 279.815,766.063 279.815,767.172
280.229,767.447 280.749,767.273 280.942,767.856 280.741,768.463 280.247,768.134 280.138,768.356 280.138,769.422
280.952,770.074 280.757,770.664 280.427,770.664 280.306,770.907 281.573,773.921 281.915,774.773 281.581,775.108
281.581,775.522 282.187,776.129 282.991,776.454 283.657,776.952 283.81,777.561 284.728,777.561 285.108,777.753 285.108,778.24
285.579,778.563 286.552,780.199 286.706,781.581 290.961,782.212 291.525,782.07 291.525,781.701 291.205,781.541 291.205,780.816
291.846,780.175 291.846,779.528 292.632,778.899 292.016,777.357 "/>
<polygon class="colorado" fill="#c1c0be" points="315.105,767.447 311.969,767.134 308.281,766.813 303.865,766.341 303.615,768.024 302.605,774.844
313.104,775.957 314.789,775.957 315.105,769.458 "/>
<polygon class="connecticut" fill="#c1c0be" points="360.982,760.627 361.432,762.274 363.285,761.039 363.871,761.039 363.871,760.808 363.568,759.451
360.982,760.06 "/>
<polygon class="delaware" fill="#c1c0be" points="360.502,768.368 359.219,766.924 359.219,766.753 359.145,766.605 359.217,767.041 359.525,768.579
360.502,768.579 "/>
<polygon class="has florida" fill="#333332" points="341.395,789.342 341.545,789.742 343.424,789.43 343.924,789.597 345.072,789.759 345.717,790.887
346.279,791.027 347.561,789.747 348.586,789.918 349.727,790.895 351.037,791.713 351.037,793.065 350.725,793.534
350.844,793.891 351.098,793.763 351.648,793.763 351.84,794.146 351.84,795.104 352.287,795.848 352.785,795.848 352.951,796.515
353.271,796.675 353.588,797.784 354.369,797.94 355.174,798.907 355.615,799.054 356.518,798.903 356.811,798.317 356.652,795.152
356.346,794.689 354.73,792.431 354.57,791.47 353.127,789.535 352.502,787.507 351.664,787.507 351.504,788.31 349.994,788.31
346.273,788.471 345.795,787.993 341.123,788.615 "/>
<polygon class="has georgia" fill="#333332" points="344.234,779.325 343.838,779.457 344.617,782.11 345.91,785.178 345.586,786.149 345.898,787.869
346.338,788.308 349.992,788.148 351.373,788.148 351.533,787.347 352.48,787.347 352.48,785.317 352.811,784.824 352.953,784.391
352.654,783.942 352.17,783.46 352.012,782.981 349.621,780.91 348.834,779.967 348.357,779.967 347.99,779.6 347.99,779.005
345.992,779.005 "/>
<polygon class="idaho" fill="#c1c0be" points="294.058,752.704 294.579,753.4 294.407,754.259 292.671,756.154 292.968,756.608 293.136,757.284
292.804,757.782 292.006,761.454 295.313,762.252 296.273,762.484 300.686,763.43 301.779,757.804 301.391,757.675 300.91,757.83
298.932,757.83 298.602,757.006 298.27,756.841 297.953,754.783 297.59,754.783 297.391,755.183 296.975,754.559 297.148,753.704
297.758,752.484 296.82,751.858 296.82,750.902 296.184,750.585 296.018,749.259 296.018,748.093 296.344,747.767 296.488,746.902
295.354,746.619 294.832,748.65 293.804,752.663 "/>
<path class="has illinois" fill="#333332" d="M334.676,765.313l-0.504,0.838l-0.799,0.479l-0.113,0.229l0.311,0.155l-0.193,0.57l-0.475,0.631l-0.15,0.452
l0.154,1.396l1.277,1.116l0.152,0.461l0.66,0.164v1.044l-0.148,0.297l0.277,0.415l0.803,0.16l0.348,0.528l0.463,1.389h0.23
l0.127-0.128l0.178-0.354h0.805l0.768-1.385v-0.964l0.488-0.811l0.15-0.602l-0.156-0.312l0.004-0.686l0.145-0.435l-0.148-0.148
v-1.143l-0.156-0.469l-0.164-0.976v-1.757l-0.92-1.685c-0.498,0.021-3.426,0.236-4.133,0.288l0.721,0.865V765.313z"/>
<polygon class="indiana" fill="#c1c0be" points="340.521,773.391 341.412,773.242 341.412,772.749 341.848,772.749 342.15,773.052 342.387,772.935
342.551,772.3 343.018,771.679 343.018,771.306 343.705,771.306 343.98,771.031 343.98,770.269 343.188,764.889 341.662,764.889
340.227,765.227 339.922,765.53 339.168,765.53 339.168,767.215 339.326,768.164 339.488,768.659 339.488,769.748 339.66,769.92
339.488,770.436 339.488,771.046 339.652,771.376 339.477,772.068 339.008,772.852 339.008,773.612 339.035,773.557 "/>
<polygon class="iowa" fill="#c1c0be" points="329.305,762.162 324.41,762.319 324.41,764.087 324.41,764.247 324.41,764.313 325.047,766.064
325.518,768.418 332.203,768.418 332.441,768.498 332.619,768.558 332.768,768.129 333.24,767.498 333.375,767.095 333.045,766.93
333.252,766.517 334.055,766.033 334.516,765.268 334.516,764.999 333.74,764.068 332.936,763.582 332.59,763.238 332.59,762.082
332.578,762.006 "/>
<polygon class="has kansas" fill="#333332" points="327.457,771.907 326.828,771.435 326.648,770.898 326.947,770.299 326.684,770.163 326.521,770.024
323.529,769.941 320.477,769.861 315.262,769.546 314.992,775.065 314.949,775.961 320.805,776.278 327.457,776.278 "/>
<polygon fill="#AFBEC6" points="326.684,770.163 326.947,770.299 326.648,770.898 326.953,770.29 326.557,770.026 326.521,770.024
"/>
<polygon class="kentucky" fill="#c1c0be" points="337.242,776.383 336.992,776.759 338.914,776.759 340.027,776.442 342.283,776.118 344.852,775.797
346.277,775.64 346.627,775.406 346.627,775.406 347.697,774.692 349.203,773.036 348.486,772.557 347.99,771.894 347.99,771.306
347.715,771.306 347.268,770.857 346.98,771.146 345.951,771.146 345.791,770.984 345.141,770.984 344.814,770.495 344.141,770.36
344.141,771.098 343.773,771.466 343.178,771.466 343.178,771.733 342.689,772.384 342.525,773.045 342.119,773.248
341.781,772.909 341.574,772.909 341.574,773.378 340.543,773.55 339.139,773.706 338.998,773.987 338.193,775.276 338.172,775.315
338.168,775.315 337.371,775.315 337.242,775.575 "/>
<path class="louisianna" fill="#c1c0be" d="M332.354,785.101h-3.293v1.989l0.475,1.107l0.662,1.155l-0.49,0.815l0.158,0.788l-0.004,0.013l0,0
c-0.012,0.082-0.057,0.33-0.117,0.58l-0.051,0.244l-0.051,0.104c-0.012,0.036-0.027,0.07-0.039,0.102l1.654,0.006l0.779,0.313
l0.924-0.153l0.521-0.349l0.367,0.367l0.631,0.788l0.588,0.146l0.639-0.32l0.809,0.162l0.406-0.136v-0.59l0.926,0.74l0.582,0.292
l0.256-0.257v-0.388l-1.123-0.321v-0.414l0.176-0.175l0.283-0.566l-0.443-0.296l-0.318-0.797l-0.33-0.164l-0.154-0.922l-0.721,0.145
l-2.502,0.167l0.002-0.746l0.326-1.306l0.645-0.644l0.141-0.424l-0.471-0.627l0,0v-0.002v-0.023l-0.037-0.555L332.354,785.101z"/>
<polygon class="maine" fill="#c1c0be" points="365.658,754.486 366.283,753.704 366.445,753.055 367.748,751.915 368.66,751.003 368.393,750.603
367.746,750.44 367.424,749.799 366.789,749.64 366.439,749.105 366.119,747.672 365.66,746.751 365.092,746.609 364.281,747.258
363.932,747.084 363.525,747.084 363.068,748.301 363.068,749.57 363.23,751.028 362.752,751.985 363.227,753.881 363.701,755.146
364.559,756.433 364.84,755.304 " />
<path class="has maryland" fill="#333332" d="M358.898,766.036c-0.568,0.153-2.57,0.692-4.146,1.099h0.58l0.332,0.499l0.25,0.125l0.016-0.016l0.047,0.048
l0.088,0.044l-0.021,0.021l0.088,0.087l0.822,0.164l0.186,0.557l-0.166,0.334v0.239l0.572,0.144h0.662l-0.271-0.554l-0.16-1.604 l0.152-0.041l0.795,1.747l0.787,0.629l0.129,0.13l0.703-0.281v-0.667h-0.947l-0.496-2.471V766.036z
M352.824,767.603l0.254,0.888l0.723-0.865l0.631-0.158l0.143-0.287
C353.76,767.389,353.086,767.555,352.824,767.603z"/>
<polygon class="massachusetts" fill="#c1c0be" points="362.049,758.31 361.969,758.346 361.963,758.322 360.982,758.462 360.982,759.894 364.088,759.117
364.133,759.102 364.164,759.135 364.941,759.756 365.451,759.756 365.613,760.237 366.084,760.237 365.941,759.806
366.615,759.302 366.746,759.039 366.475,758.633 366.186,758.633 366.506,759.114 365.85,759.114 365.186,758.617 364.664,758.096
364.816,757.482 364.434,757.354 362.119,758.278 362.123,758.299 "/>
<polygon class="michigan" fill="#c1c0be" points="345.584,764.26 345.584,763.335 346.547,762.212 346.547,761.299 346.229,760.657 345.912,759.396
345.664,759.147 345.4,759.411 344.4,760.577 343.994,760.374 343.811,759.824 344.475,758.829 344.621,758.68 344.621,757.783
344.301,757.463 344.301,756.846 343.873,756.703 343.217,756.536 342.434,756.066 342.158,756.066 341.734,756.35 341.734,756.982
341.566,757.149 341.41,757.771 341.23,758.312 340.58,758.312 340.451,758.571 340.451,759.373 340.129,760.016 340.129,761.101
340.441,761.726 340.771,762.218 340.771,763.865 340.447,764.514 340.352,765.016 341.654,764.729 343.244,764.729
343.713,764.572 "/>
<polygon class="michigan" fill="#c1c0be" points="337.838,757.716 338.715,756.4 339.195,756.239 339.525,755.745 340.188,755.745 341.002,755.257
341.502,755.423 342.717,755.271 342.854,754.859 342.717,754.313 341.826,754.461 341.275,754.463 341.121,754.002
339.771,754.452 339.281,754.943 338.096,754.943 337.301,754.307 336.279,754.477 336.279,753.874 336.719,753.288
336.533,753.194 335.109,754.455 333.76,755.055 334.316,755.75 335.596,755.91 335.752,756.066 336.709,756.066 337.551,756.739
337.551,756.74 337.557,756.744 337.561,756.767 337.719,757.244"/>
<polygon class="has minnesota" fill="#333332" points="324.248,756.982 324.248,757.031 324.201,757.029 323.785,757.446 323.914,757.703 324.41,758.198
324.41,762.159 328.979,762.002 332.551,761.847 332.436,761.16 331.025,759.907 330.029,759.575 329.865,757.787 329.693,757.615
329.875,756.894 330.506,756.578 330.506,755.314 330.506,755.302 330.531,755.284 331.809,753.848 332.951,752.707
334.125,752.056 333.119,752.056 332.797,751.735 332.369,751.735 332.047,751.896 331.203,751.896 330.734,751.583
330.232,751.751 329.895,751.247 328.994,751.097 328.68,751.254 328.154,751.254 326.711,750.291 323.447,750.291 323.447,752.288
324.248,755.985 324.248,756.87 324.357,756.873 "/>
<polygon class="has mississippi" fill="#333332" points="335.746,780.287 335.156,780.729 335.156,781.677 334.197,783.117 334.348,784.773 334.355,784.772
334.355,784.855 334.361,784.934 334.355,784.934 334.355,785.475 334.846,786.129 334.666,786.668 334.025,787.308 333.713,788.56
333.713,789.105 336.033,788.95 336.906,788.775 337.074,789.779 337.387,789.935 337.709,790.742 338.094,790.999 338.234,790.715
339.365,790.715 339.646,790.292 339.328,786.311 339.17,780.132 336.34,780.26 "/>
<path class="has missouri" fill="#333332" d="M326.578,769.861l0.021,0.001l0.498,0.331l0.066,0.033l-0.342,0.684l0.141,0.426l0.654,0.49v4.526l0.07,0.49
c0.006,0.034,0.012,0.067,0.016,0.1c0.041,0.235,0.064,0.373,0.074,0.455l3.928-0.157h0.16h2.23l0.32-0.16h1.406l-0.176,0.697
l0.303,0.302l0.098,0.292l0.238-0.599l0.154-0.622v-0.023l0.008-0.008l0.332-0.33l0.303-0.456v-0.583l-0.047,0.047h-0.412
l-0.496-1.488l-0.297-0.445l-0.801-0.16l-0.365-0.548l0.172-0.345v-0.881l-0.623-0.156l-0.168-0.502l-1.291-1.13l-0.158-1.423
l-0.42-0.14h-6.621l0.129,0.517L326.578,769.861z"/>
<polygon class="montana" fill="#c1c0be" points="301.967,756.854 301.969,756.854 301.969,756.854 307.982,757.993 312.691,758.463 312.699,758.384
312.854,756.543 312.852,756.543 312.861,756.458 312.867,756.382 312.867,756.382 313.182,753.251 313.338,749.801
309.561,749.328 305.068,748.687 299.291,747.563 296.645,746.94 296.494,747.844 296.178,748.159 296.178,749.249 296.332,750.479
296.98,750.803 296.98,751.772 297.965,752.43 297.297,753.767 297.145,754.525 297.371,754.864 297.492,754.623 298.092,754.623
298.416,756.734 298.727,756.89 299.039,757.67 300.896,757.67 301.391,757.506 301.811,757.646 301.953,756.936 "/>
<polygon class="has nebraska" fill="#333332" points="312.373,762.969 312.063,766.982 315.266,767.303 315.266,769.385 320.645,769.701 323.525,769.781
326.211,769.853 325.559,769.198 325.541,769.185 325.42,768.702 325.389,768.579 325.387,768.579 325.373,768.516 325.35,768.418
325.354,768.418 324.893,766.107 324.248,764.327 324.248,764.247 323.986,764.247 323.188,763.769 321.744,763.93 320.938,763.444
317.107,763.284 "/>
<polygon class="nevada" fill="#c1c0be" points="292.326,776.818 292.16,774.834 292.933,774.834 293.245,775.305 293.772,775.173 293.772,774.433
293.923,773.375 293.917,773.374 293.935,773.295 293.944,773.216 293.95,773.218 296.164,762.622 291.586,761.518 286.849,760.412
285.116,766.24 292.088,777.174 "/>
<polygon class="newhamphire" fill="#c1c0be" points="362.105,753.007 362.105,753.566 362.271,754.067 361.943,754.725 361.785,756.782 362.082,758.119
363.438,757.517 364.363,757.208 364.506,756.643 363.555,755.212 363.074,753.93 362.623,752.133 362.105,752.65 "/>
<polygon class="newjersey" fill="#c1c0be" points="359.373,763.969 360.047,764.641 359.07,765.943 359.328,766.591 359.449,766.47 360.395,767.101
360.986,766.063 361.145,765.273 361.143,764.498 360.992,763.888 360.645,763.541 360.844,763.145 361.143,762.994
361.143,762.624 359.791,762.255 359.506,762.192 359.221,763.051 "/>
<polygon class="newmexico" fill="#c1c0be" points="308.279,775.636 302.584,775.003 301.16,787.035 302.461,787.18 302.773,786.4 303.311,786.221
305.48,786.686 305.48,786.218 312.223,786.699 312.859,776.994 312.859,776.994 312.865,776.92 312.873,776.92 313.008,776.108 "/>
<polygon class="has newyork" fill="#333332" points="360.822,758.426 360.51,758.111 360.197,756.708 359.869,756.708 359.701,755.364 359.379,754.543
359.379,753.849 357.42,754.452 355.408,756.771 355.85,757.065 355.85,758.271 354.355,759.434 351.869,759.589 352.334,760.984
351.197,761.958 351.197,762.621 354.326,761.841 354.951,761.841 356.893,761.039 357.875,761.042 358.563,761.214
358.723,761.853 359.406,761.989 359.406,761.984 359.477,762.004 359.564,762.021 359.563,762.026 359.832,762.1 360.117,762.163
361.242,762.485 361.305,762.502 361.305,762.502 361.305,762.981 361.848,763.117 363.639,761.774 363.471,761.691
362.047,762.482 361.408,762.482 361.336,762.531 361.324,762.482 361.324,762.482 360.822,760.638 360.822,760.099
360.822,759.933 "/>
<polygon class="has northcarolina" fill="#333332" points="350.396,775.43 350.396,775.436 350.369,775.456 350.051,775.773 349.057,776.435 348.592,776.59
347.459,777.556 346.672,777.87 346.064,778.477 346.064,778.845 348.047,778.845 349.002,778.209 349.834,777.882 351.426,777.882
351.941,777.71 352.32,778.09 352.32,778.523 352.688,778.523 353.004,778.207 354.17,778.041 354.846,778.21 356.281,779.486
356.557,779.486 357.344,779.172 357.775,779.027 357.775,778.41 359.109,777.086 359.859,776.785 359.859,776.392 359.387,775.913
359.182,775.502 360.541,775.163 360.811,774.894 360.678,774.497 360.248,774.354 359.219,774.354 359.219,774.063
359.885,773.729 360.174,773.298 360.049,772.931 358.201,773.547 350.396,774.981 "/>
<polygon class="northdakota" fill="#c1c0be" points="313.029,756.393 318.238,756.708 324.088,756.866 324.088,755.994 323.77,754.56 323.287,752.297
323.287,750.289 318.23,750.132 313.498,749.815 313.342,753.423 "/>
<polygon class="has ohio" fill="#333332" points="344.131,770.195 344.91,770.351 345.225,770.824 345.857,770.824 346.018,770.984 346.914,770.984
347.268,770.63 347.783,771.146 347.99,771.146 348.15,771.146 348.33,771.146 348.633,770.084 348.645,770.04 349.113,769.884
349.113,769.257 350.092,768.604 350.398,767.994 350.547,766.351 350.238,764.191 349.805,763.323 348.256,764.403
347.268,764.729 346.287,764.729 345.65,764.411 343.752,764.728 343.346,764.863 "/>
<path class="oklahoma" fill="#c1c0be" d="M327.779,779.261l-0.162-1.45v-0.246l-0.174,0.007l0.17-0.126l-0.082-0.568
c-0.033-0.195-0.059-0.345-0.068-0.438h-6.662l-5.939-0.32h-1.682v0.807l4.953,0.319l0.182,0.547l-0.16,3.818l0.424,0.282h0.813
l0.49,0.492l0.922,0.308l0.664-0.166l0.494,0.494l1.086,0.155l1.311-0.164l0.314,0.313l0.434-0.145l0.975-0.163l0.977-0.001h0.021
l1.014,0.58l-0.154-3.545L327.779,779.261z"/>
<polygon class="has oregon" fill="#333332" points="292.341,757.706 292.642,757.255 292.493,756.661 292.146,756.139 293.938,754.184 294.087,753.439
293.647,752.852 292.716,752.696 290.951,752.056 289.361,752.056 289.039,752.056 287.4,751.887 286.774,751.575 285.808,751.575
285.485,751.575 284.931,751.204 285.255,750.392 284.798,749.926 284.655,749.643 284.108,749.552 283.663,751.036
282.054,754.416 280.778,756.331 280.778,757.855 287.143,760.241 291.561,761.272 292.17,758.535 "/>
<polygon class="has pennsylvania" fill="#333332" points="351.02,767.61 352.617,767.465 352.615,767.455 352.717,767.455 358.93,765.861 359.834,764.656
359.225,764.045 359.057,763.037 359.35,762.157 358.641,762 358.592,761.99 358.592,761.989 358.592,761.989 358.43,761.346
357.846,761.199 356.908,761.199 354.967,762.002 354.336,762.002 351.037,762.826 351.037,762.114 349.932,763.22 350.227,763.816
350.395,764.154 350.395,764.155 350.395,764.155 350.396,764.157 350.717,766.25 350.717,766.26 350.709,766.348 350.715,766.397
"/>
<polygon class="has rhodeisland" fill="#333332" points="363.725,759.407 364.006,760.681 364.512,760.428 364.512,759.709 364.09,759.286 "/>
<polygon class="southcarolina" fill="#c1c0be" points="348.15,779.533 348.424,779.807 348.91,779.807 349.734,780.799 351.65,782.392 352.137,782.878
352.148,782.889 352.15,782.892 352.15,782.892 352.311,783.373 352.779,783.841 353.086,784.299 353.297,784.299 353.451,783.541
353.635,783.176 354.293,783.176 354.727,782.741 354.727,782.26 355.23,781.755 355.689,781.449 355.689,780.823 356.572,779.646
356.221,779.646 354.77,778.356 354.162,778.204 353.08,778.358 352.756,778.685 352.16,778.685 352.16,778.156 351.898,777.894
351.439,778.043 349.85,778.043 349.07,778.354 348.15,778.968 "/>
<polygon class="has southdakota" fill="#333332" points="312.865,758.48 312.867,758.48 312.859,758.56 312.854,758.641 312.85,758.641 312.387,762.808
320.965,763.284 320.984,763.286 320.984,763.286 320.984,763.286 321.781,763.764 323.225,763.604 324.031,764.087
324.248,764.087 324.248,762.325 324.248,762.165 324.248,758.265 323.777,757.786 323.59,757.414 323.98,757.023 318.23,756.868
313.014,756.552 "/>
<path class="tennessee" fill="#c1c0be" d="M346.799,775.483l-0.465,0.311l0,0l0,0l-0.016,0.002h-0.002l-6.256,0.802l-0.053,0.016l-1.07,0.307h-0.01
h-2.053l-0.273,0.273l-0.008,0.319l-0.469,1.095l0.002,0.008l-0.018,0.027l-0.08,0.187l-0.014-0.045l-0.217,0.326v1.014l2.105-0.096
l1.262-0.057v-0.005h0.08l4.475-0.64l0.475-0.157l1.709-0.312v-0.448l0.691-0.683l0.791-0.316l1.139-0.969l0.469-0.155l1.242-0.932
v-0.343c-0.473,0.093-2.533,0.489-3.244,0.489C346.906,775.502,346.846,775.496,346.799,775.483z"/>
<path class="has texas" fill="#333332" d="M328.9,783.817h-0.637l0.002,0.062l-0.107-0.062l0,0h-0.055l-0.002-0.032l-1.066-0.609h-0.941l-0.787,0.158
l-0.635,0.159l-0.043,0.015l-0.004-0.003l-0.324-0.325l-1.256,0.157l-1.16-0.166l-0.467-0.468l-0.621,0.155l-1.002-0.335
l-0.471-0.471h-0.795l-0.537-0.359l0.16-3.88l-0.139-0.416l-4.998-0.317l-0.643,9.79l-0.08-0.006l-6.652-0.475v0.362l3.041,3.039
l0.479,1.916l2.494,1.56l0.426-0.283l0.807-1.293l0.529-0.177l1.646,0.33l1.154,0.989l0.488,1.303l0.793,1.425l1.131,1.294
l0.162,0.971l0.943,1.57l1.244,0.623h1.148l0.32,0.481h0.357v-0.882l-0.322-2.094l0.488-1.304l0.506-0.995l0.979-0.816l0.984-0.164
l0.932-0.001l0.297-0.446l0.621-0.623l-0.162-0.813l0.602-0.4l0.33,0.66l0.416-0.139l0.928-0.465l0.096-0.19
c0.035-0.107,0.072-0.244,0.107-0.389l0.096-0.483l-0.164-0.817l0.475-0.788l-0.619-1.082l-0.492-1.163v-2.005v-0.16V783.817z"/>
<polygon class="utah" fill="#c1c0be" points="300.338,765.675 300.336,765.675 300.35,765.598 300.658,763.588 296.32,762.658 294.108,773.247
302.445,774.82 303.465,767.946 303.705,766.316 300.338,765.675 "/>
<polygon class="vermont" fill="#c1c0be" points="361.93,758.165 361.623,756.794 361.793,754.667 362.1,754.055 361.945,753.58 361.945,753.189
360.762,753.337 359.539,753.796 359.539,754.527 359.859,755.334 360.012,756.548 360.326,756.548 360.654,758.031
360.932,758.307 "/>
<polygon class="virginia" fill="#c1c0be" points="355.113,767.943 354.59,768.073 354.736,768.514 354.697,768.563 353.564,770.011 352.791,770.475
352.629,771.109 352.32,771.57 352.32,772.553 352.32,772.555 352.273,772.583 350.971,773.39 349.975,773.556 349.947,773.536
349.336,773.127 347.793,774.82 347.08,775.297 350.299,774.836 358.162,773.392 359.988,772.782 359.73,772.268 358.945,772.268
358.393,771.717 358.719,771.229 358.205,770.542 358.646,770.396 358.137,770.013 357.33,769.688 356.859,769.375 356.813,769.363
356.813,769.343 356.813,768.96 356.967,768.652 356.832,768.247 356.051,768.091 356.039,768.079 355.91,767.99 355.619,768.281
"/>
<path class="has washington" fill="#333332" d="M285.083,749.497l0.172,0.346l0.508,0.507l-0.176,0.528l-0.133,0.269l0.4,0.268h0.959h0.319l0.646,0.323
l1.588,0.159h1.598l0,0h0.334l1.778,0.646l0.568,0.094l1.554-6.059l-5.381-1.582l-2.281-0.912l0.143,0.848l-0.322,0.643l0.164,1.138
l-0.498,0.496l-0.337,1.015l-0.789-0.197l0.191-0.909l0.451-0.602l-0.293-0.586c-0.668-0.668-1.428-1.377-1.549-1.412
c-0.064,0.001-0.25,0.139-0.391,0.275v0.769l-0.16,1.612v1.288l-0.301,0.886l0.148,0.024l0.016-0.052L285.083,749.497z"/>
<polygon class="westvirginia" fill="#c1c0be" points="355.607,767.785 355.555,767.758 355.246,767.295 354.697,767.295 354.541,767.604 353.891,767.768
353.008,768.826 352.662,767.621 350.896,767.782 350.67,766.88 350.549,768.053 350.217,768.713 349.273,769.343 349.273,770
348.779,770.164 348.629,770.764 348.467,771.249 348.451,771.306 348.449,771.306 348.15,771.306 348.15,771.84 348.605,772.448
349.338,772.887 349.344,772.882 349.398,772.923 349.479,772.972 349.471,772.979 350.016,773.386 350.471,773.311
350.926,773.234 351.395,772.923 352.16,772.463 352.16,771.521 352.486,771.031 352.652,770.371 353.469,769.882 353.941,769.252
354.557,768.482 354.383,767.96 355.143,767.771 355.6,768.074 355.775,767.898 "/>
<polygon class="wisconsin" fill="#c1c0be" points="332.75,761.838 332.75,761.913 332.768,761.997 332.75,761.997 332.75,763.171 333.041,763.462
333.813,763.925 338.07,763.609 337.883,760.621 338.207,759.972 338.365,758.862 338.459,758.402 338.189,758.761 337.402,759.548
337.402,758.68 337.717,758.366 337.41,756.833 336.652,756.227 335.686,756.227 335.521,756.063 334.232,755.901 333.59,755.099
332.498,754.942 332.029,754.787 331.102,755.096 330.666,755.388 330.666,756.678 330.012,757.004 329.871,757.565 330.02,757.714
330.18,759.456 331.119,759.776 332.584,761.078 332.59,761.105 332.736,761.838 "/>
<polygon class="wyoming" fill="#c1c0be" points="300.521,765.547 302.49,765.922 303.809,766.173 303.84,766.177 311.904,766.967 311.955,766.31
312.213,762.959 312.209,762.959 312.219,762.876 312.225,762.798 312.227,762.798 312.674,758.623 307.959,758.151
302.096,757.043 "/>
</svg>
And my CSS
.has:hover {
fill: #d00000;
}
I try:
add on HTML:
<div id="hasBox">Test</div>
On CSS:
#hasBox {
display: none;
position: absolute;
width: 80px;
heigth: 50px;
background-color: rgba(200,200,200,0.7);
}
On JavaScript:
var svg = document.getElementById("Layer_1");
var arrHas = svg.getElementsByClassName("has");
var box = document.getElementById("hasBox");
for(idx=0; idx < arrHas.length; idx++){
var obj = arrHas[idx];
obj.addEventListener("mouseenter", function(mouse){
mouse.stopPropagation();
box.innerHTML = mouse.currentTarget.getAttribute("class").replace("has","*");
console.log(mouse.clientX+"|"+mouse.clientY);
box.style.top = mouse.clientX + "px";
box.style.left = mouse.clientY + "px";
box.setAttribute("style", "display:block;");
}, false);
obj.addEventListener("mouseleave", function(){
box.innerHTML = " ";
box.setAttribute("style", "display:none;");
}, false);
}
Hope it helps, I'll post something better later...
Related
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>
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.
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!
Snap is not loading my svg on localhost and it's driving me nuts. I have a basic server set up with Apache and PHP.
index.html and css, js and svg folders are inside C:\Apache24\htdocs
The code is as follows:
HTML file:
<!doctype html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="js/snap.svg-min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<svg class="map_canvas"></svg>
</body>
CSS file:
.map_canvas {
width: 600px;
height: 800px;
}
JS file:
var s = Snap($(".map_canvas")[0]);
var g = s.paper.g();
Snap.load("svg/map.svg", onLoadSvg);
function onLoadSvg(doc) {
g.add( doc );
g.add( s.paper.text(200, 200, "Hello World") );
}
svg:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="712.464px" height="899.955px" viewBox="0 0 712.464 899.955" enable-background="new 0 0 712.464 899.955"
xml:space="preserve">
<g id="Map">
<polyline id="_x3C_Large_x5F_Triangle_x3E_" fill="#4E4E4E" points="352.732,31.586 23.392,879.586 673.892,879.586 "/>
<polyline id="_x3C_Sm_x5F_Triangle_x3E_" fill="#4E4E4E" points="462.892,272.391 462.892,272.391 693.892,271.891
580.401,577.821 "/>
<polyline id="_x3C_Grass_x3E_" fill="#9FB718" points="389.79,715.391 472.392,602.391 569.059,602.391 605.21,697.967
521.392,815.345 417.555,815.344 389.79,780.891 389.79,715.391 "/>
<polygon id="_x3C_Tr7_x3E_" fill="#73850B" points="495.726,796.562 505.892,796.562 505.892,802.062 512.059,802.062
512.059,796.562 523.559,796.562 509.642,761.729 "/>
<polyline id="_x3C_Tr6_x3E_" fill="#73850B" points="545.729,593.209 533.059,624.058 543.059,624.058 542.892,629.891
547.893,629.891 547.975,624.055 558.482,624.055 545.729,593.209 "/>
<polygon id="_x3C_Tr5_x3E_" fill="#73850B" points="527.392,677.391 514.892,711.391 524.392,711.391 524.392,716.891
530.392,716.891 530.392,711.391 540.892,711.391 "/>
<polygon id="_x3C_Tr4_x3E_" fill="#73850B" points="505.726,659.893 495.726,685.726 504.059,685.726 504.059,690.059
508.393,690.059 508.393,685.726 516.059,685.726 "/>
<polygon id="_x3C_Tr3_x3E_" fill="#73850B" points="501.393,700.06 491.893,724.727 499.559,724.727 499.559,729.227
504.059,729.227 504.059,724.727 512.059,724.727 "/>
<polygon id="_x3C_Tr2_x3E_" fill="#73850B" points="410.726,748.394 421.559,748.394 421.559,754.061 426.893,754.061
426.893,748.394 438.226,748.394 424.476,713.727 "/>
<polygon id="_x3C_Tr1_x3E_" fill="#73850B" points="445.726,742.062 435.393,769.514 444.227,769.395 444.226,773.895
448.559,773.895 448.559,769.395 457.059,769.229 "/>
<polygon id="_x3C_Rd_x5F_7_x3E_" fill="#FFF167" points="467.631,272.38 536.892,367.557 639.225,367.557 639.287,271.992
650.287,271.992 650.225,367.557 658.402,367.557 654.801,377.266 650.225,377.266 650.225,389.602 639.559,418.354
639.559,377.391 536.892,377.266 516.892,413.224 511.892,399.891 524.642,377.141 503.162,377.141 499.475,367.557
524.642,367.557 471.479,294.679 462.892,272.391 "/>
<path id="_x3C_Rd_x5F_6_x3E_" fill="#FFF167" d="M536.559,794.105l11.016-15.427c0,0,0.016,67.879,0.016,68.879
s75.854-101.22,75.854-101.22l5.303,13.986l- 16.084,20.583l30.896,41.984l-8.917,7.151l-29.432-40.151l-24.984,34.333
l41.695,55.362h-14.333l-34.362-46.362l-33.667,46.362h-13.333l10.333-16.029v-67.333"/>
<polygon id="_x3C_Rd_x5F_5_x3E_" fill="#FFF167" points="351.56,623.558 351.56,733.894 389.79,733.894 389.79,746.338
351.56,746.338 351.56,811.558 340.227,811.558 340.227,642.225 "/>
<polygon id="_x3C_Rd_x5F_4_x3E_" fill="#FFF167" points="393.227,555.89 399.894,545.89 457.059,623.366 450.185,632.77 "/>
<polyline id="_x3C_Rd_x5F_3_x3E_" fill="#FFF167" points="134.227,811.558 147.892,812.534 147.892,589.266 158.621,589.33
262.894,740.223 269.227,729.227 205.561,638.89 295.561,638.89 295.561,628.223 198.561,628.223 171.894,589.33 279.667,589.33
295.561,609.89 295.561,590.89 191.007,448.002 186.12,460.587 270.553,577.821 140.54,577.948 135.408,591.161 "/>
<polygon id="_x3C_Rd_x5F_2_x3E_" fill="#FFF167" points="310.392,516.891 399.892,516.891 393.227,528.891 310.392,528.891 "/>
<polygon id="_x3C_Rd_x5F_1_x3E_" fill="#FFF167" points="295.561,381.391 216.877,381.391 212.371,392.994 295.561,392.994 "/>
<path id="_x3C_Lg_x5F_rd_x5F_top_x5F_curve_x3E_" fill="#D3D3D3" d="M423.499,838.141c0,0,0,0,0-13.75
s-11.107-12.833-11.107-12.833"/>
<path id="_x3C_Lg_x5F_rd_x5F_btm_x3E_" fill="#D3D3D3" d="M254.645,833.354H41.347l-5.213,13.424h354.343l-0.149,32.811
l12.815-0.003c0,0,0.107-20.771,0.107-33.398s-11.107-12.833-11.107- 12.833H258.31H254.645z"/>
<polygon fill="#D3D3D3" points="295.561,178.793 295.561,686.558 262.894,740.223 262.894,811.558 49.812,811.558 44.599,824.981
410.726,824.981 410.478,879.586 423.392,879.586 423.499,824.391 412.392,811.558 278.558,811.558 278.558,742.062
491.893,397.225 484.522,378.558 310.392,659.893 310.392,140.605 "/>
<circle id="_x3C_Roundabout_x5F_lg_x3E_" fill="#888888" cx="269.906" cy="830.043" r="28.209"/>
<circle id="_x3C_Roundabout_x5F_sm_x3E_" fill="#C5C5C5" cx="269.867" cy="830.107" r="15.901"/>
</g>
<g id="Locations">
<path id="_x3C_Viner_x5F_Gallery_x5F_Q_x3E_" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" d="M281.199,341.615
c0,0-1.607,0-16.165,0c-8.927,0-16.165-7.237-16.165-16.165c0- 8.928,7.237-16.165,16.165-16.165
c8.928,0,16.165,7.237,16.165,16.165c0,3.792-1.306,7.278- 3.492,10.036L281.199,341.615z"/>
<polygon id="_x3C_Viner_x5F_Gallery_x5F_Tr_x3E_" fill="#4D4D4D" points="264.973,315.891 255.245,332.141 274.495,332.141 "/>
<path id="_x3C_Newhampton_x5F_Inn_x5F_Q_x3E_" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" d="M606.625,419.271
c0,0-1.607,0-16.165,0c-8.927,0-16.165-7.236-16.165-16.165c0- 8.928,7.238-16.165,16.165-16.165
c8.928,0,16.165,7.237,16.165,16.165c0,3.792-1.306,7.278- 3.492,10.036L606.625,419.271z"/>
<polygon id="_x3C_Newhampton_x5F_Inn_x5F_Tr_x3E_" fill="#4D4D4D" points="590.398,393.546 580.67,409.796 599.92,409.796 "/>
<path id="_x3C_Royal_x5F_Oak_x5F_Q_x3E_" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" d="M350.263,570.397
c0,0-1.607,0-16.165,0c-8.927,0-16.165-7.236-16.165-16.165c0- 8.928,7.238-16.164,16.165-16.164
c8.928,0,16.165,7.236,16.165,16.164c0,3.792-1.306,7.278- 3.492,10.036L350.263,570.397z"/>
<polygon id="_x3C_Royal_x5F_Oak_x5F_Tr_x3E_" fill="#4D4D4D" points="334.036,544.674 324.308,560.923 343.558,560.923 "/>
<path id="_x3C_West_x5F_Park_x5F_Cafe_x5F_Q_x3E_" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" d="M480.411,682.168
c0,0-1.607,0-16.164,0c-8.928,0-16.166-7.236-16.166-16.165c0- 8.928,7.238-16.164,16.166-16.164s16.164,7.236,16.164,16.164
c0,3.792-1.305,7.278-3.492,10.036L480.411,682.168z"/>
<polygon id="_x3C_West_x5F_Park_x5F_Cafe_x5F_Tr_x3E_" fill="#4D4D4D" points="464.185,656.444 454.456,672.693 473.706,672.693
"/>
<path id="_x3C_Tap_x5F_and_x5F_Ale_x5F_Q_x3E_" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" d="M263.41,620.494
c0,0-1.607,0-16.164,0c-8.928,0-16.166-7.236-16.166-16.165c0- 8.928,7.238-16.164,16.166-16.164s16.164,7.236,16.164,16.164
c0,3.792-1.305,7.278-3.492,10.036L263.41,620.494z"/>
<polygon id="_x3C_Tap_x5F_and_x5F_Ale_x5F_Tr_x3E_" fill="#4D4D4D" points="247.183,594.771 237.455,611.02 256.705,611.02 "/>
<path id="_x3C_Asylum_x5F_Q_x3E_" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" d="M278.819,683.244
c0,0-1.607,0-16.164,0c-8.928,0-16.166-7.236-16.166-16.165c0- 8.928,7.238-16.164,16.166-16.164s16.164,7.236,16.164,16.164
c0,3.792-1.305,7.278-3.492,10.036L278.819,683.244z"/>
<polygon id="_x3C_Asylum_x5F_Tr_x3E_" fill="#4D4D4D" points="262.593,657.521 252.864,673.77 272.114,673.77 "/>
<path id="_x3C_Combermere_x5F_Q_x3E_" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" d="M330.879,733.896
c0,0-1.607,0-16.164,0c-8.928,0-16.166-7.236-16.166-16.165c0- 8.928,7.238-16.164,16.166-16.164s16.164,7.236,16.164,16.164
c0,3.792-1.305,7.278-3.492,10.036L330.879,733.896z"/>
<polygon id="_x3C_Combermere_x5F_Tr_x3E_" fill="#4D4D4D" points="314.653,708.173 304.924,724.422 324.174,724.422 "/>
<path id="_x3C_Clarendon_x5F_Q_x3E_" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" d="M320.356,785.627
c0,0-1.607,0-16.164,0c-8.928,0-16.166-7.236-16.166-16.165c0- 8.928,7.238-16.164,16.166-16.164s16.164,7.236,16.164,16.164
c0,3.792-1.305,7.278-3.492,10.036L320.356,785.627z"/>
<polygon id="_x3C_Clarendon_x5F_Tr_x3E_" fill="#4D4D4D" points="304.13,759.903 294.401,776.152 313.651,776.152 "/>
<path id="_x3C_Eagle_x5F_Q_x3E_" fill="#FFFFFF" stroke="#FFFFFF" stroke- miterlimit="10" d="M123.195,785.627
c0,0-1.607,0-16.164,0c-8.928,0-16.166-7.236-16.166-16.165c0- 8.928,7.238-16.164,16.166-16.164s16.164,7.236,16.164,16.164
c0,3.792-1.305,7.278-3.492,10.036L123.195,785.627z"/>
<polygon id="_x3C_Eagle_x5F_Tr_x3E_" fill="#4D4D4D" points="106.968,759.903 97.24,776.152 116.49,776.152 "/>
<path id="_x3C_NAC_x5F_Q_x3E_" fill="#FFFFFF" stroke="#FFFFFF" stroke- miterlimit="10" d="M627.174,845.438c0,0-1.607,0-16.164,0
c-8.928,0-16.166-7.236-16.166-16.165c0-8.928,7.238-16.164,16.166- 16.164s16.164,7.236,16.164,16.164
c0,3.792-1.305,7.278-3.492,10.036L627.174,845.438z"/>
<polygon id="_x3C_NAC_x5F_Tr_x3E_" fill="#4D4D4D" points="610.947,819.714 601.219,835.963 620.469,835.963 "/>
</g>
</svg>
Am I missing something important? Do I need node.js?
Usually I'd use <svg id="mySVG" .... and avoid jQuery if you're learning SnapSVG. Here's the simplest example, get it working and then replace myURL with your SVG. If your SVG doesn't work, it may be an Apache issue (you running from http://localhost, not directly off the HDD?)
var s = Snap("#svg");
var myURL = "https://upload.wikimedia.org/wikipedia/commons/f/f4/Penrose_triangle.svg";
Snap.load(myURL, function(frag) { // returns fragment
var my_g = s.g(); // create new group
my_g.append(frag); // append fragment
my_g.attr({id: 'penrose' }); // assign ID for easier access
my_g.add( s.paper.text(10, 20, "Hello Penrose") );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
<svg id="svg" width="300" height="300" ></svg>
Sidenote: Suggest you use the console window to test these JS code first.
I have created a cube with a few rectangles on the inside using illustrator and I wanted to use javascript and HTML to show the rectangles on the inside when someone hovers over the cube but nothing is working! Please help me.
My html is:
<html>
<head>
<meta charset="UTF-8">
<title>snap1.1</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/snap.svg.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<svg id="squares"></svg>
</body>
</html>
The javascript is:
$(document).ready(
function () {
var s = Snap("#squares");
Snap.load("./svg/hide_the_world.svg", function (data)
{
flatWorld = data.select("#flatWorld");
s.append(flatWorld);
hoverBoard = s.select("#hideSides");
world = s.select("#world");
leftSide = s.select("#left");
rightSide = s.select("#right");
topSide = s.select("#top");
//hoverBoard.hover(inBoard,outBoard);
//hoverBoard.click(hoverBoardClick);
world.click(clickWorld);
leftSide.click(clickLeft);
rightSide.click(clickRight);
topSide.click(clickTop);
}
);
var inWorld = function () {
}
var outWorld = function () {
$("#world").css("fill","green");
}
var clickTop = function () {
topSide.animate({ transform: 'translate( 0,-1000)' }, 1000, mina.easeinout );
}
var clickLeft = function () {
leftSide.animate({ transform: 'translate(-300,176)' }, 1000, mina.easeinout );
}
var clickRight = function () {
rightSide.animate({ transform: 'translate(300,176)' }, 1000, mina.easeinout );
}
var hoverBoardClick = function () {
hoverBoard.animate({'opacity': 0.0}, 250);
//hoverBoard.animate({ transform: 'translate( 0,-3000)' }, 1000, mina.easeinout );
}
var moveBoard = function () {
//alert("moveBoard");
hoverBoard.transform('translate(0,-1000)');
}
var inBoard = function () {
//alert("bob");
hoverBoard.animate({'opacity': 0.0}, 250, mina.easeinout, moveBoard);
}
var outBoard = function () {
hoverBoard.animate({'opacity': 1.0}, 250);
}
}
);
I'm not sure if you need my SVG code but here it is too:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="flatWorld" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-99 101 600 600" style="enable-background:new -99 101 600 600;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;stroke:#000000;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st1{fill:#FFFFFF;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st2{fill:#FFFFFF;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st3{fill:none;stroke:#000000;stroke-miterlimit:10;}
.st4{fill:#AF6464;}
.st5{fill:#79C679;}
.st6{fill:#887AC4;}
.st7{fill:#655E8E;}
.st8{font-family:'SnellRoundhand';}
.st9{font-size:4.5217px;}
.st10{fill:#61C6C6;}
.st11{font-size:13.9783px;}
.st12{fill:#B8B9C1;}
.st13{font-family:'Noteworthy-Light';}
.st14{font-size:12px;}
.st15{fill:#659392;}
.st16{fill:#A1D672;}
</style>
<g>
<polygon class="st0" points="214,571.7 40.8,471.7 214,371.7 387.2,471.7 "/>
</g>
<g>
<polygon class="st1" points="214,571.7 40.8,471.7 40.8,271.7 214,371.7 "/>
<polygon class="st1" points="214,371.7 40.8,271.7 214,171.7 387.2,271.7 "/>
<polygon class="st1" points="387.2,471.7 214,571.7 214,371.7 387.2,271.7 "/>
</g>
<g>
<polygon class="st2" points="214,571.7 40.8,471.7 40.8,271.7 214,371.7 "/>
<polygon class="st2" points="214,371.7 40.8,271.7 214,171.7 387.2,271.7 "/>
<polygon class="st2" points="387.2,471.7 214,571.7 214,371.7 387.2,271.7 "/>
</g>
<path class="st2" d="M86.5,298c-4.1,6.8-7.9,13.8-11.6,20.9c-3.3,6.4-16.1,23.6-13,30.6c11.4,25.8,22.4,51.8,33.6,77.7
c4.4,19.3,8.9,38.5,13.3,57.8c0.1,4.5,55.5,7.8,61.2,12.8c14.4,12.5,28.7,28.6,44.8,38.8c2.4,1.5,17.8-15.3,19.5-16.9
c19.8-19.3,39.5-38.6,59.6-57.6c0,0,0.1-0.1,0.1-0.1c2-1.9,9.3-2.5,11.8-3.2c9.1-4.5,21.8-5.9,31.7-8.5c3.4-0.9,18.2-4.1,19.3-6.6
c0.4-1.1-1.1-4.8-1.3-5.9c-1.7-7.5-3.4-15-5.1-22.5c-4.3-19.3-8.7-38.6-13-57.8c-1.3-5.9-4.3-13.1-4.3-19.1c0-7.3,7.7-17.6,11-23.8
c4.7-9,9.6-18.2,15.1-26.6c-12.8-4.9-25.7-9.7-38.5-14.5c-5.7-2.2-11.5-4.3-17.2-6.5c-1.4-0.5-6.1-1.4-7-2.6
c-5.5-7.4-11-14.7-16.6-22.1c-4.2-5.5-8.3-11.1-12.5-16.6c-2.7-3.6-6.5-11.2-11.1-12.2c-16.3-3.5-32.5-7-48.8-10.6
c0,0-48.3,43.2-48.9,43.7c-1.3,1.2-8.2,0.9-9.9,1.1c-8.1,0-16,1.4-24,2.5c-4.8,0.7-5.3,0.7-8.4,4c-7.2,8-12.9,18.5-19,27.4
C93.3,286.9,89.8,292.4,86.5,298z"/>
<path class="st2" d="M120.1,257.8c-0.7,0.6-1.3,1.4-1.8,2.2c-9.5,13.6-19.1,27.1-28.6,40.7c-5.7,8.1-9.6,17.2-13.7,26.1
c-2.6,5.4-9.2,11.2-9,17.9c0.2,7.5,6.8,17.7,9.7,24.7c8.6,21,19.6,41.3,24.6,63.6c2.1,9.4,3.9,18.9,5.8,28.4
c0.8,4,0.2,13.3,3.6,15.9c1.3,1,3,1.4,4.6,1.7c12.4,2.5,24.9,5.2,37.3,7.8c5.8,1.2,12.5,1.8,18,3.9c4.8,1.8,43.5,36.6,44.4,36.1
c7.7-4.7,13.1-12.7,19.5-18.9c7.6-7.4,15.3-14.8,22.9-22.2c6.8-6.5,13.5-13.1,20.3-19.6c1.9-1.8,5.9-7.5,8.5-8.2
c0,0,60.7-16.3,60.7-16.3c-3-14.1-6.1-28.2-9.1-42.3c-2.4-11.2-4.8-22.5-7.3-33.7c-2-9.2-7-19.4-6.2-28.9c0.5-6.1,5.3-12.4,8.2-17.9
c3.1-5.7,6-11.5,9-17.2c1.1-2.2,4.9-6.7,4.9-9.1c0-2.9,0.4-1.3-1.4-3c-3.7-3.5-13-5.2-17.6-7.1c-5.1,0-13.3-5.3-18.1-7.3
c-4.8-1.9-11.6-3.2-15-7.4c-6.9-8.6-13.8-17.3-20.7-26c-5-6.3-8.4-14.5-14.8-19.6c-4.8-3.8-12-4.2-17.9-5.4
c-7.3-1.6-14.5-3.1-21.8-4.7c-2.8-0.6-6.8-3-9.7-2.5c-5.8,1.1-10.4,8.2-14.5,12c-5.3,4.9-10.8,9.5-16.2,14.3
c-3.7,0-14.6,13.1-17.3,15.6c-0.9,0.8-1.7,1.6-2.8,2.2c-5.7,3-16.7,2.1-23.1,2.7C130.8,256.5,123.7,254.9,120.1,257.8
C120.1,257.8,120.1,257.8,120.1,257.8z"/>
<line class="st3" x1="213.5" y1="212" x2="213.5" y2="372"/>
<line class="st3" x1="214" y1="371.7" x2="102.9" y2="433.9"/>
<line class="st3" x1="214" y1="371.7" x2="339.2" y2="442.8"/>
<rect x="135.9" y="269" class="st4" width="35.9" height="206"/>
<rect x="183" y="269" class="st5" width="35.9" height="206"/>
<rect x="231.1" y="269" class="st6" width="35.9" height="206"/>
<rect x="266.1" y="276" transform="matrix(0.9316 0.3635 -0.3635 0.9316 155.9605 -77.5507)" class="st7" width="35.9" height="199.3"/>
<rect x="135.9" y="279.6" class="st5" width="35.9" height="12.4"/>
<text transform="matrix(0.9373 0 0 1 141.0549 288.2795)" class="st8 st9">Half of my heart</text>
<rect x="183" y="449.7" class="st10" width="35.9" height="12.4"/>
<rect x="183" y="282.1" class="st10" width="35.9" height="12.4"/>
<text transform="matrix(1.146950e-02 -1.1451 0.9999 1.001592e-02 206.0669 400.9011)" class="st8 st11">BIBLE</text>
<rect x="231.1" y="279.6" class="st12" width="35.9" height="12.4"/>
<rect x="294.6" y="295.7" transform="matrix(0.9316 0.3634 -0.3634 0.9316 131.109 -93.0543)" class="st10" width="36.5" height="12.4"/>
<text transform="matrix(-7.525938e-03 1 -1 -7.525938e-03 242.3439 305.506)" class="st13 st14">The childrens book</text>
<rect x="277.6" y="340" transform="matrix(0.9316 0.3634 -0.3634 0.9316 146.0477 -83.8479)" class="st15" width="36.5" height="12.4"/>
<rect x="243.4" y="427.7" transform="matrix(0.9316 0.3634 -0.3634 0.9316 175.5866 -65.399)" class="st16" width="36.5" height="12.4"/>
<g id="hideSides">
<polygon id="left" class="st2" points="214,572 40.8,472 40.8,272 214,372 "/>
<polygon id="top" class="st2" points="214,372 40.8,272 214,172 387.2,272 "/>
<polygon id="right" class="st2" points="387.2,472 214,572 214,372 387.2,272 "/>
</g>
</svg>
Thank you so so much