当背景颜色为黑色时，白色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>

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

Answer 1

问题在于使用color属性覆盖SVG fill属性。 <script type="text/javascript"> document.getElementById('button').addEventListener("click", function (event) { event.preventDefault(); getRooms(); return false; }); function getRooms() { let url = 'https://localhost:44317/api/waitingrooms'; let table = document.createElement("TABLE"); table.setAttribute("id", "waitingRooms"); let tr = document.createElement("TR"); tr.setAttribute("id", "myTR"); fetch(url) .then(function (response) => { if (response.status == 200) { return response.json(); } else { throw `error with status ${response.status}`; } } ) . then(data => data); . then } 属性不适用于SVG。您的SVG填充为黑色。使用Inline SVG或创建另一个具有属性color的SVG文件。