Svg在html <img>标记中显示错误的颜色

Question

我使用的是.svg格式的白色图标(如果直接查看它，它会正确显示为白色)。Hovewer当我尝试在html代码中使用它时，它显示为黑色。

<img src="{% static '/img/person.svg' %}" width="45" height="45" alt="Profile-Icon">

不知道我做错了什么。

<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-person text-white" fill="#FFFFFF" color="white" xmlns="w3.org/2000/svg">
  <path fill-rule="evenodd" d="M10 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0zM8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm6 5c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
</svg>

Answer 1

svg中的颜色可以由css声明覆盖。在下面的第一个代码片段中，您的原始svg只使用了一点css来显示一个对比的背景，以显示白色svg...

​

div {
  font-size: 3rem;
  background: orange;
  color: blue;
}

<div>test
  <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-person text-white" fill="#FFFFFF" xmlns="w3.org/2000/svg"> <path fill-rule="evenodd" d="M10 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0zM8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm6 5c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/> </svg>
</div>

​

在第二个代码片段中，fill="#FFFFFF"被更改为fill="currentColor"，以显示这如何强制svg使用包含的div的文本颜色...

​

div {
  font-size: 3rem;
  background: orange;
  color: blue;
}

<div>test
  <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-person text-white" fill="currentColor" xmlns="w3.org/2000/svg"> <path fill-rule="evenodd" d="M10 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0zM8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm6 5c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/> </svg>
</div>

​

在第三个代码片段中，添加了更多的css代码，以便使用原始css中指定的一个类将svg颜色更改为白色(text-white -它可以是这三个类中的任何一个)。这里需要指出的是，当使用第三个选项时，svg中指定的任何颜色都将被覆盖，即使使用了这里所示的"currentColor“。

​

div {
  font-size: 3rem;
  background: orange;
  color: blue;
}

.text-white {
  fill: white;
}

<div>test
  <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-person text-white" fill="currentColor" xmlns="w3.org/2000/svg"> <path fill-rule="evenodd" d="M10 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0zM8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm6 5c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/> </svg>
</div>

​

您的问题可能源于页面中现有的css。查看是否有针对svg内部指定的类(.bi、.bi-person、.text-white)或svg本身的css声明。如果是这样，其中一个可能指定为黑色。

Answer 2

<img src="{% static "my_app/example.jpg" %}" alt="My image">

了解有关Managing static files的更多信息

您的代码需要进行一些更改

<img src="{% static "/img/person.svg" %}" width="45" height="45" alt="Profile-Icon">