我想将SVG类的颜色更改为彩虹动画。我该怎么做呢？

Question

我想把cls-2填充改为彩虹色同步，我试过这样做，但没有成功。

<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>

我可以用CSS或Javascript来做吗？帮帮我!

Answer 1

您在infinite中有拼写错误，需要添加颜色里程碑，如下所示

​

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>

​

Answer 2

infinite拼写错误，需要使用彩虹的百分比和颜色来定义keyframes (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>

​