无法将 SVG 的颜色更改为白色答案

【问题标题】：Can't change color of SVG to white无法将 SVG 的颜色更改为白色
【发布时间】：2021-09-05 20:27:42
【问题描述】：

在我的 Angular 项目中，我正在使用 SVG 显示一些图标的项目。图标具有默认的灰色，我想在鼠标悬停时将其更改为白色。我尝试更改为红色/绿色/黄色它可以工作，但是当我尝试白色时它不起作用。

这是我的 HTML 代码

<div class="user-name">
    <svg *ngIf="hasCopyToClipboard" width="10" height="12" viewBox="0 0 10 12"
         fill="none" xmlns="http://www.w3.org/2000/svg">
        <path opacity="0.5"
              d="M6.49997 0.500031H0.999995C0.449998 0.500031 0 0.950028 0 1.50003V7.99999C0 8.27499 0.224999 8.49999 0.499997 8.49999C0.774996 8.49999 0.999995 8.27499 0.999995 7.99999V2.00002C0.999995 1.72502 1.22499 1.50003 1.49999 1.50003H6.49997C6.77497 1.50003 6.99996 1.27503 6.99996 1.00003C6.99996 0.725029 6.77497 0.500031 6.49997 0.500031ZM6.79497 2.79502L9.20995 5.21001C9.39495 5.39501 9.49995 5.65 9.49995 5.915V10.5C9.49995 11.05 9.04995 11.5 8.49996 11.5H2.99498C2.44499 11.5 1.99999 11.05 1.99999 10.5L2.00499 3.50002C2.00499 2.95002 2.44999 2.50002 2.99998 2.50002H6.08497C6.34997 2.50002 6.60497 2.60502 6.79497 2.79502ZM6.49997 6H8.74996L5.99997 3.25002V5.50001C5.99997 5.775 6.22497 6 6.49997 6Z"
              fill="white"/>
    </svg>
    {{userData?.UserName}}
</div>

这是我的 SCSS

.user-name {
  width: 100%;
  font-weight: 500;
  font-size: 12px;
  padding-left: 3px;

  svg {
    float: right;
    margin: 2px 0 2px 10px;
    cursor: pointer;

    :hover {
      fill: white;
    }
  }

}

【问题讨论】：

标签： html css svg sass

【解决方案1】：

您正在将:hover 上的填充颜色直接设置在svg 上，而它应该在path 元素上，因为SVG 路径已经有fill="blue"。

svg:hover path { }

请参阅下面的示例作为您提供的代码的提取。

svg {
  margin: 2px 0 2px 10px;
  cursor: pointer;
}

svg:hover path {
  fill: red;
}

<svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path opacity="0.5"
                                          d="M6.49997 0.500031H0.999995C0.449998 0.500031 0 0.950028 0 1.50003V7.99999C0 8.27499 0.224999 8.49999 0.499997 8.49999C0.774996 8.49999 0.999995 8.27499 0.999995 7.99999V2.00002C0.999995 1.72502 1.22499 1.50003 1.49999 1.50003H6.49997C6.77497 1.50003 6.99996 1.27503 6.99996 1.00003C6.99996 0.725029 6.77497 0.500031 6.49997 0.500031ZM6.79497 2.79502L9.20995 5.21001C9.39495 5.39501 9.49995 5.65 9.49995 5.915V10.5C9.49995 11.05 9.04995 11.5 8.49996 11.5H2.99498C2.44499 11.5 1.99999 11.05 1.99999 10.5L2.00499 3.50002C2.00499 2.95002 2.44999 2.50002 2.99998 2.50002H6.08497C6.34997 2.50002 6.60497 2.60502 6.79497 2.79502ZM6.49997 6H8.74996L5.99997 3.25002V5.50001C5.99997 5.775 6.22497 6 6.49997 6Z"
                                          fill="blue"/>

【讨论】：

但是在尝试白色时，它不起作用：/
@HovhannesGevorgyan white white 永远不会工作。