SVG color change with JavaScript

Question

Here is my code:

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

You also can find it here.

If you click the red rectangle, .cls2 and .cls3 should be red. My JS code is false. How is it possible to do that?

(The white shape in the background is necessary for my next step.)

Cue · Accepted Answer · 2019-07-27 20:18:30Z

You can't manipulate SVG properties that are served as a background image, even through CSS, because it's not a DOM element.

One way would be to serve your svg from some server side mechanism. This could be a GET request where you can pass parameters that result in the SVG being returned as a resource to client-side.

Alternatively, you could embed the SVG code in the DOM and manipulate directly. This means you'll need to replicate the animation in Javascript. See the example I've implemented as a guide.

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>

Thank you. If I put the SVG code in the DOM, how would it be possible then to animate it how it is at the moment? — user5513378, Commented Jul 27, 2019 at 19:35
Thank you so much, it helps! For my next step I need this: <script> function black() { document.querySelector("").style.color = "black"; } function red() { document.querySelector("").style.color = "red"; } function blue() { document.querySelector("*").style.color = "blue"; } </script> Is it possible to include that directly? Or is a second <script></script> better? — user5513378, Commented Jul 27, 2019 at 23:23

Collectives™ on Stack Overflow

SVG color change with JavaScript

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related