html - CSS 并在悬停时更改 SVG 图标

Question

这是我的 boostrap 菜单中的菜单项:

<li class="nav-item">
 <a href="#" class="icon"><span class="number">1</span>
   <img src="images/svg-icons/notifications-active.svg" alt="" />
 </a>
</li>

如您所见，有一个 SVG 图像被拉入，并附加了一个类作为“图标”

这是我认为可以使其切换为不同颜色的 CSS:

<style media="screen">
.icon:hover {
    fill: #DA4567;
    }
</style>

知道我做错了什么或者它不是那样工作的吗？

谢谢!

Answer 1

内联 SVG 的

我个人建议您使用内联 svg。它们更易于管理，并且加载时间也增加了，因为它们与页面请求异步加载。

使用内联 svg 将允许您直接操作 svg 元素甚至其中的特定路径。

.icon:hover {
  fill: #DA4567;
}

<div style="height: 0; width: 0; position: absolute; visibility: hidden;">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="icon-donut" viewBox="0 0 483 483">
    <path d="M184.824,159.112L84.293,58.582C126.683,22.104,181.792,0,242.104,0c126.567,0,230.391,97.138,241.124,220.921H340.714 c-9.734-45.534-50.164-79.695-98.609-79.695C220.812,141.226,201.099,147.852,184.824,159.112z M141.226,242.104 c0-19.077,5.399-36.859,14.593-52.076L54.666,88.889C20.507,130.628,0,183.964,0,242.104c0,126.567,97.138,230.378,220.921,241.124 V340.714C175.387,330.979,141.226,290.543,141.226,242.104z M263.289,340.714v142.515 c116.797-10.131,209.809-103.148,219.939-219.939H340.714C332.439,301.992,301.993,332.439,263.289,340.714z" />
  </symbol>
  </svg>
</div>

<li class="nav-item">
  <a href="#" class="icon">
    <span class="number">1</span>
    <svg class="Icon">
      <use href="#icon-donut" />
   </svg>
  </a>
</li>

---

背景 SVG

如果您想使用图像路径，那么将其设置为背景图像将允许您使用 filter 属性。

.icon {
  background: url(https://upload.wikimedia.org/wikipedia/commons/8/81/Octicons-link-external.svg) no-repeat;
  height: 100px;
  width: 100px;
  background-size: contain;
  display: block;
}

.icon:hover {
  filter: invert(38%) sepia(79%) saturate(658%) hue-rotate(301deg) brightness(88%) contrast(95%);
}

<li class="nav-item">
  <a href="#">
    <span class="number">1</span>
    <span class="icon"></span>
  </a>
</li>

---

SVG 蒙版

.icon {
  mask: url(https://upload.wikimedia.org/wikipedia/commons/8/81/Octicons-link-external.svg) no-repeat;
  display: block;
  width: 100px;
  height: 100px;
  background: black;
  mask-size: contain;
}

.icon:hover,
.icon:focus {
  background: #DA4567;
}

<li class="nav-item">
  <a href="#"><span class="number">1</span>
  <span class="icon"></span>
 </a>
</li>