css - 将 svg 图像更改为导航栏中的文本

Question

是否可以将 svg 图像转换为文本？我买了一个 Bootstrap templates .

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

*如果我有一个标志，如果它是白色的，向下移动后，它是不可见的。

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>