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

Posted 2023-03-06

【中文标题】无法将 SVG 的颜色更改为白色

【英文标题】：Can't change color of SVG to white

【发布时间】：2021-09-05 20:27:42

【问题描述】：

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

这是我的 html 代码

<div class="user-name">
    <svg *ngIf="hasCopyToClipboard"   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;
    
  

【参考方案1】：

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

svg:hover path  

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

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


svg:hover path 
  fill: red;

<svg   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 永远不会工作。