用 JavaScript 改变 SVG 颜色

Question

这是我的代码：

HTML：

<div class="icon"></div>
<article class="button" onclick="test()"></article>

CSS：

.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;
}
}

JS：

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

您也可以找到它here。

如果单击红色矩形，.cls2 和 .cls3 应该是红色的。我的 JS 代码是错误的。这怎么可能？

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

Answer 1

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

一种方法是通过某种服务器端机制为您的 svg 提供服务。这可能是一个 GET 请求，您可以在其中传递参数，从而将 SVG 作为资源返回给客户端。

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

const icons = document.querySelectorAll('.icon');

const runAnimation = () => {
  const active = document.querySelector('.icon.active');
  let nextSibling = active.nextSibling;
  while(nextSibling && nextSibling.nodeType != 1) {
    nextSibling = nextSibling.nextSibling
  }
  if (!nextSibling) {
    nextSibling = icons[0];
  }
  active.classList.remove('active');
  nextSibling.classList.add('active');
}

const changeState = (event) => {
  let color = event.target.value;
  Array.from(icons).forEach((element) => element.style.fill = color ? color : 'inherit')
}

const button = document.querySelectorAll('button')
button.forEach((element) => element.addEventListener('click', changeState, false));

let timer = setInterval(runAnimation, 600);
// stop animation by clearInterval(timer);

.icon-container {
  width: 80px;
  height: 103px;
  position: relative;
}

.icon {
  width: 80px;
  height: 103px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.icon.active {
  opacity: 1;
}

<div class="icon-container">
  <div class="icon active">
    <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>
  </div>
  <div class="icon">
    <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>
  </div>
  <div class="icon">
    <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>
  </div>
</div>

<div>
  <button value="red">Red</button>
  <button value="green">Green</button>
  <button value="blue">Blue</button>
  <button value="">Reset</button>
</div>