I want to change SVG class colors to rainbow animation. How can I do it?-CodePudding

I want to change cls-2 fill as rainbow color sync.I tried like this and it didn't work.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 955.55 955.55">
<defs><style>.cls-1{fill:rgb(255, 255, 255);}.cls-2{animation:mymove 5s infinate;}@keyframes mymove{from{fill:red}to{fill:red}}</style></defs>
<g id="Layer_2" data-name="Layer 2">
    <g id="Layer_1-2" data-name="Layer 1">
        <circle  cx="477.78" cy="477.78" r="477.78"/>
        <rect  x="265.53" y="265.53" width="110.9" height="110.9"/>
        <rect  x="422.33" y="265.53" width="110.9" height="110.9"/>
        <rect  x="579.12" y="265.53" width="110.9" height="110.9"/>
        <rect  x="265.53" y="422.33" width="110.9" height="110.9"/>
        <rect  x="422.33" y="422.33" width="110.9" height="110.9"/>
        <rect  x="579.12" y="422.33" width="110.9" height="110.9"/>
        <rect  x="265.53" y="579.12" width="110.9" height="110.9"/>
        <rect  x="422.33" y="579.12" width="110.9" height="110.9"/>
        <rect  x="579.12" y="579.12" width="110.9" height="110.9"/>
    </g>
</g>
</svg>

Can I do it using CSS or Javascript? Help me!

CodePudding user response：

You have a spelling mistake in infinite and you need to add the colors milestones as follow

svg {
  width: 200px;
  height: 200px;
}

.cls-1{
  fill: rgb(255, 255, 255);
}

.cls-2{
  animation: rainbow 5s infinite;
}

@keyframes rainbow {
  0% { fill: red; }
  15% { fill: orange; }
  30% { fill: yellow; }
  45% { fill: green; }
  60% { fill: blue; }
  75% { fill: purple; }
  100% { fill: red; }
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 955.55 955.55">
<g id="Layer_2" data-name="Layer 2">
    <g id="Layer_1-2" data-name="Layer 1">
        <circle  cx="477.78" cy="477.78" r="477.78"/>
        <rect  x="265.53" y="265.53" width="110.9" height="110.9"/>
        <rect  x="422.33" y="265.53" width="110.9" height="110.9"/>
        <rect  x="579.12" y="265.53" width="110.9" height="110.9"/>
        <rect  x="265.53" y="422.33" width="110.9" height="110.9"/>
        <rect  x="422.33" y="422.33" width="110.9" height="110.9"/>
        <rect  x="579.12" y="422.33" width="110.9" height="110.9"/>
        <rect  x="265.53" y="579.12" width="110.9" height="110.9"/>
        <rect  x="422.33" y="579.12" width="110.9" height="110.9"/>
        <rect  x="579.12" y="579.12" width="110.9" height="110.9"/>
    </g>
</g>
</svg>

CodePudding user response：

infinite is misspelled and the keyframes needed to be defined using percentages and the colors of the rainbow (ROYGBIV).

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 955.55 955.55">
<defs>
<style>
  .cls-1{fill:rgb(255, 255, 255);}
  .cls-2{animation:mymove 5s infinite;}
  @keyframes mymove{
    0%{fill:red}
    14%{fill:orange}
    28%{fill:yellow}
    42%{fill:green}
    56%{fill:blue}
    70%{fill:indigo}
    84%{fill:violet}
    100%{fill:red}
  }
</style>
</defs>
<g id="Layer_2" data-name="Layer 2">
    <g id="Layer_1-2" data-name="Layer 1">
        <circle  cx="477.78" cy="477.78" r="477.78"/>
        <rect  x="265.53" y="265.53" width="110.9" height="110.9"/>
        <rect  x="422.33" y="265.53" width="110.9" height="110.9"/>
        <rect  x="579.12" y="265.53" width="110.9" height="110.9"/>
        <rect  x="265.53" y="422.33" width="110.9" height="110.9"/>
        <rect  x="422.33" y="422.33" width="110.9" height="110.9"/>
        <rect  x="579.12" y="422.33" width="110.9" height="110.9"/>
        <rect  x="265.53" y="579.12" width="110.9" height="110.9"/>
        <rect  x="422.33" y="579.12" width="110.9" height="110.9"/>
        <rect  x="579.12" y="579.12" width="110.9" height="110.9"/>
    </g>
</g>
</svg>