当背景颜色为黑色时，白色 svg 图标不可见答案

【问题标题】：White svg icons are not visible when background-color is black当背景颜色为黑色时，白色 svg 图标不可见
【发布时间】：2019-10-12 23:28:38
【问题描述】：

我有两个图标：

铃铛 - 图标
设置图标

它们显示在导航栏中，您可以在屏幕截图的右上角看到：

当我将图标包装背景颜色设置为黑色时，该图标不再可见。

需要帮助了解原因。

检查代码：

HTML 代码：

<div className="container">
  <header className="header">
    <nav className="user-nav">
      <div className="user-nav-item">
        <Link href="/">
          <a className="user-nav-item-link">Overview</a>
        </Link>
      </div>
      <div className="user-nav-item">
        <Link href="/search">
          <a className="user-nav-item-link">Search</a>
        </Link>
      </div>
      <div className="user-nav-item">
        <Link href="/feed">
          <a className="user-nav-item-link">Feed</a>
        </Link>
      </div>
      <h3 className="logo">Logo</h3>
    </nav>

    <div className="user-nav-icon">
      <div className="user-nav-icon-box">
        <img src={bellIcon} alt="notify icon" />
      </div>
      <div className="user-nav-icon-box">
        <img src={settingsIcon} alt="settings icon" />
      </div>
    </div>
  </header>
</div>

CSS 代码：

.container {
  max-width: 100vw;
  display: flex;
  flex-direction: column;


.header {
  display: flex;
  align-items: center;
  height: 5rem;
  color: #fff;
  background-color: black;


    &-icon {
      display: flex;
      align-items: center;
      background-color: white;
      color: red;
      margin-right: 3rem;

      & > * {
        padding: 0 0.8rem;
        cursor: pointer;
      }

      &-icon-notification {
        color: red;
      }
    }
  }
}

【问题讨论】：

标签： html css svg sass

【解决方案1】：

问题在于使用颜色属性覆盖 SVG 填充属性。 color 属性不适用于 SVG。您的 SVG 填充是黑色的。使用内联 SVG 或创建另一个具有属性 fill: white 的 SVG 文件。

【讨论】：