CODEWITHSUNDEEP
javascriptcssfrontend
TvoiNacalnik
TvoiNacalnik

Reputation: 51

How to invert the color of SVG logo?

I have a black color logo (logotype.svg) on a white background and a burger menu with black overlay. How can I invert my logo to white when the overlay is active? So i need to apply this -webkit-filter: invert(100%) for class "logo" only when the menu is active.

Here's the menu code:

var burgerMenu = document.getElementById('burger-menu');
var overlay = document.getElementById('menu');
burgerMenu.addEventListener('click',function(){
  this.classList.toggle("close");
  overlay.classList.toggle("overlay");
});

Upvotes: 2

Views: 8490

Answers (1)

ATIQ UR REHMAN
ATIQ UR REHMAN

Reputation: 448

Use the following code in css for inverting color.

.normal {
  filter:invert(0%)
}
.inverted {
  filter:invert(100%)
}

You can set the classes with javascript to solve your problem.

Upvotes: 2

Related Questions