Quiero cambiar el relleno cls-2 como sincronización del color del arco iris. Lo intenté así y no funcionó.
<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 class="cls-1" cx="477.78" cy="477.78" r="477.78"/> <rect class="cls-2" x="265.53" y="265.53" width="110.9" height="110.9"/> <rect class="cls-2" x="422.33" y="265.53" width="110.9" height="110.9"/> <rect class="cls-2" x="579.12" y="265.53" width="110.9" height="110.9"/> <rect class="cls-2" x="265.53" y="422.33" width="110.9" height="110.9"/> <rect class="cls-2" x="422.33" y="422.33" width="110.9" height="110.9"/> <rect class="cls-2" x="579.12" y="422.33" width="110.9" height="110.9"/> <rect class="cls-2" x="265.53" y="579.12" width="110.9" height="110.9"/> <rect class="cls-2" x="422.33" y="579.12" width="110.9" height="110.9"/> <rect class="cls-2" x="579.12" y="579.12" width="110.9" height="110.9"/> </g> </g> </svg>¿Puedo hacerlo usando CSS o Javascript? ¡Ayúdame!
Tiene un error de ortografía en infinite y necesita agregar los hitos de colores de la siguiente manera
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 class="cls-1" cx="477.78" cy="477.78" r="477.78"/> <rect class="cls-2" x="265.53" y="265.53" width="110.9" height="110.9"/> <rect class="cls-2" x="422.33" y="265.53" width="110.9" height="110.9"/> <rect class="cls-2" x="579.12" y="265.53" width="110.9" height="110.9"/> <rect class="cls-2" x="265.53" y="422.33" width="110.9" height="110.9"/> <rect class="cls-2" x="422.33" y="422.33" width="110.9" height="110.9"/> <rect class="cls-2" x="579.12" y="422.33" width="110.9" height="110.9"/> <rect class="cls-2" x="265.53" y="579.12" width="110.9" height="110.9"/> <rect class="cls-2" x="422.33" y="579.12" width="110.9" height="110.9"/> <rect class="cls-2" x="579.12" y="579.12" width="110.9" height="110.9"/> </g> </g> </svg>infinite está mal escrito y los keyframes debían definirse utilizando porcentajes y los colores del arcoíris (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 class="cls-1" cx="477.78" cy="477.78" r="477.78"/> <rect class="cls-2" x="265.53" y="265.53" width="110.9" height="110.9"/> <rect class="cls-2" x="422.33" y="265.53" width="110.9" height="110.9"/> <rect class="cls-2" x="579.12" y="265.53" width="110.9" height="110.9"/> <rect class="cls-2" x="265.53" y="422.33" width="110.9" height="110.9"/> <rect class="cls-2" x="422.33" y="422.33" width="110.9" height="110.9"/> <rect class="cls-2" x="579.12" y="422.33" width="110.9" height="110.9"/> <rect class="cls-2" x="265.53" y="579.12" width="110.9" height="110.9"/> <rect class="cls-2" x="422.33" y="579.12" width="110.9" height="110.9"/> <rect class="cls-2" x="579.12" y="579.12" width="110.9" height="110.9"/> </g> </g> </svg>