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

#javascript #html #css #svg

Есть логотип, в svg. 

Мне необходимо менять цвет логотипа белый или чёрный в зависимости от доминирующего
цвета под логотипом. 

Пробовал для этих целей использовать плагин BackgroundCheck. В чистом html плагин
работает, но на когда загружаю на Тильду - не работает. 

Как мне кажется, игнорируются мои стили. Что я делаю не так?








  
  
  



  
  

    
      

    
  
  
  

    
    

    

    

    

    

    

    

    

    

    

    
  








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


Заранее благодарен.
    

Ответы

Ответ 1

Попробуйте вот так:

  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:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
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://sketchapp.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%3C/svg%3E");
}

  
    

  


  
  

  

  

  

  

  

  

  

  

  

  



Ответ 2

Недавно столкнулся с аналогичным вопросом. Единственный и весьма спорный вариант
реализации который нашел, требует подключения tweenmax и дублирования логотипа (в вашем
случае). Еще один недостаток - при скролле время от времени наблюдаются подёргивания.
Тем не менее, альтернативы не нашел.



function logoSwitch () {
  $('.icon-container.abso').each(function() {
    
    var distance = $('.icon-container').offset().top - $(this).closest('.row').offset().top;
    
    TweenLite.to(this,0,{y:distance, force3D:true});
  });
};

$(document).scroll(function() {
  logoSwitch();
});

logoSwitch();
* {
  padding: 0;
  margin: 0;
}

body {
  font-family: 'Playfair Display', serif;
}

.row {
  min-height: 110vh;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.icon-container {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 20px;
  left: 20px;
  transform: translate3d(0, 0, 0);
  -webkit-transform-style: preserve-3d;
}
.icon-container.abso {
  position: absolute;
  top: 0;
  left: 20px;
}
.icon-container .logo {
  width: 300px;
}

.logo {
  width: 300px;
  cursor: pointer;
}

.startLogo:active {
  animation: repaint 1ms;
}

.whiteLogo {
  fill: white;
  stroke: white;
}

.blackLogo {
  color: #1d1d1d;
}

.grey {
  background: #ccc;
}

.blue {
  background: skyBlue;
}




  

      
  



  

    
  



Ответ 3

Полностью - смотрите здесь:
https://jsfiddle.net/xmoonlight/zatdu0v2/

Это основная часть кода:

function setLogoColor(eImg,eSVGLogo,bw) {
    var c=getAverageRGB(eImg,eSVGLogo);
  if(bw) {
    eSVGLogo.style.fill=(c.l<128)?'rgb(255,255,255)':'rgb(0,0,0)';

    } else eSVGLogo.style.fill='rgb('+c.r+','+c.g+','+c.b+')';  
}

setLogoColor(document.querySelector('.img img'),document.querySelector('.img svg'),1);


Ответ 4

Через CSS3-фильтры можно добиться приемлемого результата, если использовать цепочку
фильтров.

Цвет SVG логотипа делаем чёрным. Если он белый - меняем фильтр invert() с 1 на 0.
Фильтр brightness() помогает снизить волну цветовых переходов (60% - это +/-10%)
при сильной разнице цветов на изображении, находящегося за логотипом.
Порядок следования фильтров и порядок следования стилей - крайне важны!

Демо: https://jsfiddle.net/xmoonlight/7wgnxfsd/