jQuery addClass example

Change class name on click in jQuery

by Steve

HTML

<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs></defs>
  <symbol id="RadSite" viewBox="-32.7 -37.8 65.4 75.6">
    <polygon class="st0" points="-24.6,4.7 -16.4,9.5 -32.7,18.9 -32.7,0 	" style="fill: rgb(0, 151, 182);">
      <animate class="animate-radsite" />
    </polygon>
    <polygon class="st1" points="-24.6,-4.7 -32.7,0 -32.7,-18.9 -24.6,-14.2 	" style="fill: rgb(170, 213, 154);">
      <animate class="animate-radsite" />
    </polygon>
    <polygon class="st2" points="-24.6,4.7 -32.7,0 -24.6,-4.7 	" style="fill: rgb(14, 128, 160);">
      <animate class="animate-radsite" />
    </polygon>
    <polygon class="st3" points="-32.7,-18.9 -24.6,-23.6 -24.6,-14.2 	" style="fill: rgb(60, 176, 156);">
      <animate class="animate-radsite" />
    </polygon>
    <polygon class="st2" points="0,-37.8 16.4,-28.4 0,-18.9 	" style="fill: rgb(14, 128, 160);">
      <animate class="animate-radsite" />
    </polygon>
    <polygon class="st3" points="16.4,-9.5 16.4,-28.4 32.7,-18.9 	" style="fill: rgb(60, 176, 156);">
      <animate class="animate-radsite" />
    </polygon>
    <polygon class="st4" points="0,-18.9 16.4,-28.4 16.4,-9.5 	" style="fill: rgb(36, 152, 160);">
      <animate class="animate-radsite" />
    </polygon>
    <polygon class="st5" points="24.6,-4.7 16.4,-9.5 32.7,-18.9 32.7,0 	" style="fill: rgb(8, 150, 179);">
      <animate class="animate-radsite" />
    </polygon>
    <polygon class="st6" points="24.6,14.2 24.6,4.7 32.7,0 32.7,18.9 	" style="fill: rgb(173, 213, 145);">
      <animate class="animate-radsite" />
    </polygon>
    <polygon class="st2" points="24.6,-4.7 32.7,0 24.6,4.7 	" style="fill: rgb(14, 128, 160);">
      <animate class="animate-radsite" />
    </polygon>
    <polygon class="st7" points="32.7,18.9 24.6,23.6 24.6,14.2 	" style="fill: rgb(69, 175, 155);">
      <animate class="animate-radsite" />
    </polygon>
    <polygon class="st8" points="0,37.8 -16.4,28.4 0,18.9...

JavaScript

let colors = ['rgb(0, 151, 182)', 'rgb(170, 213, 154)', 'rgb(14, 128, 160)', 'rgb(60, 176, 156)', 'rgb(14, 128, 160)', 'rgb(60, 176, 156)', 'rgb(36, 152, 160)', 'rgb(8, 150, 179)', 'rgb(173, 213, 145)', 'rgb(14, 128, 160)', 'rgb(69, 175, 155)', 'rgb(0, 125, 165)', 'rgb(54, 149, 125)', 'rgb(77, 175, 155)', 'rgb(210, 231, 196)', 'rgb(26, 169, 225)', 'rgb(155, 215, 246)', 'rgb(25, 179, 232)', 'rgb(103, 200, 201)', 'rgb(210, 231, 196)', 'rgb(26, 169, 225)', 'rgb(158, 218, 247)', 'rgb(25, 179, 232)', 'rgb(92, 201, 244)'];

$( ".animate-radsite" ).each(function( index ) {
  $(this).attr('attributeName', 'fill');
$(this).attr('repeatCount', 'indefinite');
$(this).attr('values', colors.join(';'));
$(this).attr('dur', Math.floor(Math.random() * 100) + 's');
});