将svg图像更改为导航栏中的文本。 Bootsrap

Question

是否可以将svg图像转换为文本？我买了其中一部Bootsrap templates。

在导航栏中，向下滚动时，文本从白色变为黑色。 我希望它与我的徽标相同。我可以将徽标更改为文本吗？如果可以，怎么办？

*如果我有徽标，并且如果是白色，则向下移动后将不可见。

任何帮助将不胜感激。

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>