用JavaScript改变SVG颜色

这是我的密码：

HTML:

你也可以找到它

如果单击红色矩形，.cls2和.cls3应为红色。我的JS代码是假的。这怎么可能呢

---

（背景中的白色形状是我下一步所必需的。）

即使通过CSS，也不能操作用作背景图像的SVG属性，因为它不是DOM元素

一种方法是从服务器端机制为svg提供服务。这可能是一个

GET

请求，在该请求中，您可以传递导致SVG作为资源返回到客户端的参数

或者，您可以将SVG代码嵌入DOM中，并直接进行操作。这意味着您需要用Javascript复制动画。请参见我作为指南实现的示例

const icons=document.querySelectorAll（'.icon'）；
const runAnimation=（）=>{
const active=document.querySelector（'.icon.active'）；
设nextSibling=active.nextSibling；
while（nextSibling&&nextSibling.nodeType！=1）{
nextSibling=nextSibling.nextSibling
}
如果（！nextSibling）{
nextSibling=图标[0]；
}
active.classList.remove（'active'）；
nextSibling.classList.add（'active'）；
}
const changeState=（事件）=>{
让颜色=event.target.value；
Array.from（icons）.forEach（（element）=>element.style.fill=color？color:'inherit'）
}
const button=document.queryselectoral（'按钮'）
button.forEach（（element）=>element.addEventListener（'click'，changeState，false））；
让定时器=设置间隔（runAnimation，600）；
//通过clearInterval（计时器）停止动画
.icon容器{
宽度：80px；
高度：103px；
位置：相对位置；
}
.图标{
宽度：80px；
高度：103px；
位置：绝对位置；
左：0；
排名：0；
不透明度：0；
}
.icon.active{
不透明度：1；
}

红色
绿色
蓝色
重置
谢谢。如果我将SVG代码放在DOM中，那么如何能够将其动画化为当前的状态呢？非常感谢，这很有帮助！对于我的下一步，我需要这个：函数black（）{document.querySelector（“”.style.color=“black”；}函数red（）{document.querySelector（“”.style.color=“red”；}函数blue（）{document.querySelector（“*”）.style.color=“blue”}是否可以直接包含它？还是第二个更好？
<div class="icon"></div>
<article class="button" onclick="test()"></article>

.icon {
width: 80px;
height: 103px;
animation: animation 1s infinite step-end;
float: left;
margin-left: 10px;
}

.button {
height: 20px;
width: 20px;
background-color: red;
cursor: pointer;
float: left;
margin-left: 10px;
}

@keyframes animation
{
0% {
background: 
url('data:image/svg+xml;utf8,<svg viewBox="0 0 56.9 73.13" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="white" d="M56.9,73.13H0V0H44.78L56.9,12.11Z" transform="translate(0 0)"/><path id="test" d="M56.9,73.13H0V0H44.78L56.9,12.11ZM2.12,71H54.78V14.23H42.66V2.12H2.12Zm42.66-58.9H53.9L44.78,3Z" transform="translate(0 0)"/><path class="cls-3" d="M42.05,49.65c-2.75,2.93-4.24,4-6.6,5a12.2,12.2,0,0,1-4.23.82,8.61,8.61,0,0,1-7.46-4.09c-1.4-2.5-2-5.87-2-10.64,0-9.81,3-15,8.67-15a9.3,9.3,0,0,1,6.26,2.65c2.07,1.83,3.17,3.42,4.81,7h1.15v-11H41.37c-.72,1.68-1.15,2.17-2.11,2.17a6.74,6.74,0,0,1-2.17-.63,18.13,18.13,0,0,0-7.27-1.69c-9.38,0-16.41,7.22-16.41,17s6.88,16.56,16.7,16.56c5.39,0,8.62-1.69,13.38-6.89l-1.44-1.2Z" transform="translate(0 0)"/></svg>') right no-repeat;
}
33.333% {
background: 
url('data:image/svg+xml;utf8,<svg viewBox="0 0 56.9 73.13" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="white" d="M56.9,73.13H0V0H44.78L56.9,12.11Z" transform="translate(0 0)"/><path class="cls-2" d="M56.9,73.13H0V0H44.78L56.9,12.11ZM2.12,71H54.78V14.23H42.66V2.12H2.12Zm42.66-58.9H53.9L44.78,3Z" transform="translate(0 0)"/><path class="cls-3" d="M44.6,25H34.54v1.15c3.42.24,4.09.63,4.09,2.12,0,.77-.1,1-1,3.32l-6,15.5L25.15,31.31c-.86-2.12-1.06-2.7-1.06-3.37,0-1.11.73-1.59,2.51-1.68.24-.05.86-.05,1.54-.15V25H12.3v1.15c2.36.39,2.79.72,3.95,3.32L28.33,57.69h1.25L40.36,30c1.16-2.94,1.78-3.51,4.24-3.9V25Z" transform="translate(0 0)"/></svg>') right no-repeat;
}
66.666% {
background: 
url('data:image/svg+xml;utf8,<svg viewBox="0 0 56.9 73.13" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="white" d="M56.9,73.13H0V0H44.78L56.9,12.11Z" transform="translate(0 0)"/><path class="cls-2" d="M56.9,73.13H0V0H44.78L56.9,12.11ZM2.12,71H54.78V14.23H42.66V2.12H2.12Zm42.66-58.9H53.9L44.78,3Z" transform="translate(0 0)"/></svg>') right no-repeat;
}
}

function test() {
document.querySelector(".cls2, .cls3").style.fill = "red";
}