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

Question

我有两个图标：

1. 钟 - 图标

2. 设置图标

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

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

需要帮助来了解原因。

检查代码：

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>

代码：

.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;
      }
    }
  }
}

标签： htmlcsssvgsass

Answer 1

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