jQuery addClass example

Change class name on click in jQuery

HTML

<svg id="metallika" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 557.78 233.74"><defs>
<linearGradient id="grad" x1="0" x2="0" y1="0" y2="100%" gradientUnits="userSpaceOnUse">
        <stop offset="0%" stop-color="royalblue"></stop>
        <stop offset="40%" stop-color="royalblue" stop-opacity="0.5"></stop>
 
    <stop offset="40%" stop-color="royalblue" stop-opacity="0"></stop>
    
<stop offset="60%" stop-color="royalblue" stop-opacity="0.5"></stop>
    
        <stop offset="100%" stop-color="royalblue"></stop>
      </linearGradient>
      <style>
          #metallika {fill:url(#grad);}
</style></defs><g id="layer1"><g id="g2433"><path id="path23" d="M421.89.83C440.46,17.36,459.4,33.52,479,49L459.37,37.54c-2.17-1.08-5.37,0-3.06,4.42,33.84,63.51,68.35,126.75,101.47,190.62q-43.32-40.46-83.37-79.29l28,17.34c3.35,1.41,5.51-1.33,2-6.89l-33.9-70.36-5.87-11.73-7.9-.25,7.39,47.16-22.8-26.44L437.52,28.9,421.89.83Zm32,64.29h4.49l-6.53-10.64,2,10.64Z"></path></g></g><g id="layer1-2" data-name="layer1"><g id="g2433-2" data-name="g2433"><path id="path23-2" data-name="path23" d="M136.29.83,120.67,28.9l-3.9,73.22L94,128.56l7.39-47.16-7.9.25L87.59,93.38l-33.9,70.36c-3.47,5.56-1.31,8.3,2,6.89l28-17.34Q43.68,192.14.4,232.58C33.52,168.71,68,105.47,101.87,42c2.31-4.42-.88-5.5-3.06-4.42L79.18,49c19.6-15.5,38.54-31.66,57.11-48.19Zm-32,64.29,2-10.64L99.81,65.12Z"></path></g></g><path d="M155.15,55.85V102H137.51V55.85H123.94V41.33h42.78l1,14.52Z"></path><path d="M178.7,102H163.84L182,41.33h19.76L221.65,102H203.27L191.1,58.77Z"></path><path d="M270.71,87.47V102H225.1l-1-60.62h45.61l1,14H243.35v8.79h22.12V77.57H243.35v9.9Z"></path><path d="M303,55.85V102H285.37V55.85H272.8l-1-14.52h42.77l1,14.52Z"></path><path d="M338.93,95.56V102H320.86l-1-60.62h18.07l1,24.3q0,4.83-.53,11.53,3.33-7.27,6.62-12.9l9.59-16.45-1-6.48h18.08l1,60.62H354.61V77.87q0-5.19.49-11.49a121.74,121.74,0,0,1-6.62,12.86Z"></path><path...