jQuery addClass example

Change class name on click in jQuery

by jpeter06

HTML

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100px"  >
    <style type="text/css">
        <![CDATA[
      

/*Animated svg logo */
@keyframes rotAspas {
  from {    transform:   rotate(0deg);  }
  to {    transform:  rotate(360deg);  }
}

.aspas {
  animation-duration: 6s;
  animation-name: rotAspas;
  animation-iteration-count: infinite;
  animation-direction: normal;
  transform-origin: center center;
  animation-timing-function:linear;
  fill=none;
  stroke=red;
}

        ]]>
    </style>
    <defs>
        <polygon id="aspa" class="aspa" points="50,49,51,51,60,54,95,50,95,49"  />
        <polygon id="torreta" class="torreta"  points="49,50,51,50,53,120,48,120"   />
        <g id="aspas" class="aspas" >
            <circle cx="50" cy="50" r="50" class="circle1" />
            <circle cx="50" cy="50" r="4" class="circle2"  />
            <use href="#aspa" />
            <use href="#aspa" transform="rotate(120 50 50)" />
            <use href="#aspa" transform="rotate(240 50 50)" />
        </g>
        <g id="molino" fill="currentColor">
            <use href="#torreta" />
            <use href="#aspas" />
        </g>
    </defs>
    <use class="molino" href="#molino" x="0" y="4" transform="scale( 0.7 0.7)" /> 
</svg>
<svg height="50px" viewBox="0 0 100 100" >
  <use href="#molino" class="codrops-1" />
</svg>
<svg height="50px" viewBox="0 0 100 100" >
  <use href="#molino" class="codrops-2" />
</svg>
 <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 60 60">
    <style type="text/css">
        <![CDATA[
      

       @keyframes drawWheel {
            from {
                transform:   rotate(360deg);
            }
            to {
            transform:  rotate(0deg);
            }
        }
        
        #rueda {
            animation-duration: 6s;
            animation-name: drawWheel; 
            animation-iteration-count:...

CSS

body {background:blue;margin:0;padding:0}



.codrops-1  { fill:white; color:white}
.codrops-2  { fill:white; color:red}


svg circle {
    fill: none;
}