Измените изображение SVG на текст в панели навигации.Bootsrap

Question

Можно ли преобразовать изображение SVG в текст?Я купил один из шаблонов Bootsrap .

. При прокрутке вниз на навигационной панели текст меняется с белого на черный.Я хотел бы, чтобы это было так же с моим логотипом.Могу ли я изменить свой логотип на текст?если так, то как это сделать?

* если у меня есть логотип и если он белый, то после перемещения вниз он не виден.

ЛюбойПомощь будет оценена.

Answer 1

Если вы хотите изменить изображение с черного на белое или наоборот, вы можете использовать свойство css filter с его invert() функцией

body {
  font: 13px Verdana;
  
}

.div {
  display: flex;
  align-items: center;
  padding: 10px;
}

.before {
  background: red;
  color: white;
}

img {
  margin-left: 30px;
}

.before img {
  filter: invert(1)
}

.after {
  border: 1px solid red
}

Before Scroll
<div class="div before">
  <h2>Boomerange</h2>
  <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/vote.svg" width="100">
</div>
<br><br> After Scroll
<div class="div after">
  <h2>Boomerange</h2>
  <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/vote.svg" width="100">
</div>