Как можно сделать инверсию цвета логотипа относительно фона?

Question

[metori]

Привет. Есть черный логотип свг на белом фоне, и есть раскрывающееся меню на всю страницу, где оверлей черный. Когда меню открыто, то логотип, естественно, черный и его не видать, можно ли как-то сделать инверсию, которая бы срабатывала при открытии меню? Вот весь код менюшки раскрывающейся:

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

Можно ли как-то применить к классу .logo вот это -webkit-filter: invert(100%); при открытии меню с оверлеем?

Comments

[Lord_Dantes]

Вы, можете при клике добавлять этот CSS-код. Я мог бы сказать в jq но в js не знаю.

[metori]

Slave, скажите в jq, попробую

Answer 1

[BB 8]

logo.classList.toggle('invert'); внутри addEventListener

Comments

[metori]

Внутри addEventListener - это можно вставить после overlay.classList.toggle("overlay");? Если так, то не поменялось ничего

Answer 2

[metori]

Интересует конкретно инверсия при помощи фильтра и js, потому что применяться будет не только к лого. logo.classList.toggle('invert'); не работает

Применяя filter: invert(100%); к обычному черному логотипу - он становится белым. Кто-то еще знает варианты как можно сделать так, чтобы filter: invert(100%); срабатывал только при открытии меню?