时间戳

首页 > 解决方案 > 如何更改图像标签上的 svg 填充颜色

html - 如何更改图像标签上的 svg 填充颜色

问题描述

每当用户悬停此元素时，我都会尝试更改svg图像的颜色，但由于某种原因，它不会改变。我不知道这是否与 my 的格式有关svg，但我认为这没有什么问题。

在我的研究中，我发现了有关该filter属性的帖子，但它有太多的选项可以更改，而不仅仅是传递一个hex或rgb颜色。

这是我的代码：

/* Tags */

body {
  height: 100%;
  margin: 0;
}

footer {
  width: 100%;
  height: 70px;
  background-color: rgb(40, 40, 40);
  position: absolute;
  bottom: 0;
}


/* Ids */

#left-panel {
  height: 100%;
  width: 180px;
  background-color: rgb(18, 18, 18);
  position: absolute;
}

#play-btn {
  margin-left: 50%;
  margin-top: 14px;
  height: 40px;
}


/* Actions */

.svg:hover path {
  fill: rgb(255, 255, 255);
}
<body style="background-color: rgb(24, 24, 24);">
  <div id="left-panel">
  </div>

  <footer>
    <img src="./components/src/icons/play-button.svg" id="play-btn" class="svg"/>
  </footer>
</body>

SVG 文件

<svg width="104" height="104" viewBox="0 0 104 104" fill="none" xmlns="http://www.w3.org/2000/svg" class="svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M52 3.75C25.3523 3.75 3.75 25.3523 3.75 52C3.75 78.6477 25.3523 100.25 52 100.25C78.6477 100.25 100.25 78.6477 100.25 52C100.25 25.3523 78.6477 3.75 52 3.75ZM0.25 52C0.25 23.4193 23.4193 0.25 52 0.25C80.5807 0.25 103.75 23.4193 103.75 52C103.75 80.5807 80.5807 103.75 52 103.75C23.4193 103.75 0.25 80.5807 0.25 52Z" fill="#B3B3B3"/>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M70.2891 52L42 72V32L70.2891 52Z" fill="#B3B3B3"/>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M41.1955 30.4459C41.7763 30.1452 42.4762 30.1935 43.0102 30.5711L71.2993 50.5711C71.7632 50.899 72.0391 51.4318 72.0391 52C72.0391 52.5682 71.7632 53.101 71.2993 53.429L43.0102 73.429C42.4762 73.8065 41.7763 73.8548 41.1955 73.5541C40.6147 73.2534 40.25 72.654 40.25 72V32C40.25 31.346 40.6147 30.7466 41.1955 30.4459ZM43.75 35.3804V68.6196L67.2576 52L43.75 35.3804Z" fill="#B3B3B3"/>
</svg>

标签： htmlcss

解决方案

推荐阅读