Автоматическая смена цвета SVG в зависимости от цвета изображения под SVG

1,00

р.

Есть логотип, в svg.
Мне необходимо менять цвет логотипа белый или чёрный в зависимости от доминирующего цвета под логотипом.
Пробовал для этих целей использовать плагин BackgroundCheck. В чистом html плагин работает, но на когда загружаю на Тильду - не работает.
Как мне кажется, игнорируются мои стили. Что я делаю не так?

 .images { width: 100% display: block } .fixed-nav { /* background-color: red */ position: fixed left: 100px top: 47px width: 80px z-index: 99999 } .fixed-nav.background--dark .fixed-nav-line { /* background: #fff */ } .fixed-nav.background--dark .fixed-nav-logo { background-image: url(https:/tatic.tildacdn.com/tild3831-3566-4637-b934-383138346332/Awhite.svg) height: 43px width: 33px /* fill: white */ /* color: #fff */ } .fixed-nav.background--light .fixed-nav-logo { background-image: url(https:/tatic.tildacdn.com/tild6133-3534-4237-b863-666531326632/A.svg) height: 43px width: 33px } .fixed-nav-line, .fixed-nav-logo { background-image: url(https:/tatic.tildacdn.com/tild6133-3534-4237-b863-666531326632/A.svg) display: inline-block vertical-align: middle margin: 0 padding: 0 } .fixed-nav-line { width: 40px height: 3px background: #222 } .fixed-nav-logo { /* background-color: yellow */ width: 33px height: 43px font-size: 28px font-weight: bold text-align: center z-index: 99999 }

P.S. Может существуют другие способы решения моей задачи?
Заранее благодарен.

Ответ
Попробуйте вот так:
mix-blend-mode: difference filter: invert(.7)

.images { width: 100% display: block } .fixed-nav { position: fixed left: 100px top: 47px mix-blend-mode: difference filter: invert(.7) } .fixed-nav-logo { width: 150px height: 200px background-image: url("data:imagevg+xml,%3Csvg xmlns='http://www.w3.org/2000vg' xmlns:xlink='http://www.w3.org/1999/xlink' width='150px' height='200px' viewBox='0 0 33 44'%3E%3C!-- Generator: Sketch 55.2 (78181) - https:/ketchapp.com --%3E%3Ctitle%3EGroup 6%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cdefs%3E%3Cpolygon id='path-1' points='0.0003 0.2282 32.824 0.2282 32.824 29 0.0003 29'/%3E%3C/defs%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='iPhone-8-Copy-3' transform='translate(-273.000000, -27.000000)'%3E%3Cg id='Group-6' transform='translate(273.000000, 29.000000)'%3E%3Cg id='Group-3' transform='translate(0.000000, 12.292900)'%3E%3Cmask id='mask-2' fill='white'%3E%3Cuse xlink:href='%23path-1'/%3E%3C/mask%3E%3Cg id='Clip-2'/%3E%3Cpath d='M20.7453,18.2922 L18.9043,13.3612 C18.0503,11.2202 17.1073,8.5922 16.2093,6.0882 C15.3113,8.5922 14.3693,11.2202 13.5613,13.3612 L11.7193,18.2922 L20.7453,18.2922 Z M22.9003,23.9892 L9.6093,23.9892 L7.7683,29.0002 L0.0003,29.0002 L11.7643,0.2282 L20.7903,0.2282 L32.8243,29.0002 L24.7863,29.0002 L22.9003,23.9892 Z' id='Fill-1' fill='%231D1D1B' mask='url(%23mask-2)'/%3E%3C/g%3E%3Cpath d='M23.1925,7.7951 C23.1925,11.6391 20.0765,14.7551 16.2325,14.7551 C12.3875,14.7551 9.2715,11.6391 9.2715,7.7951 C9.2715,3.9511 12.3875,0.8341 16.2325,0.8341 C20.0765,0.8341 23.1925,3.9511 23.1925,7.7951 Z' id='Stroke-4' stroke='%231D1D1B' stroke-width='5.669'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cvg%3E") }