logo标签列表

CSS和鼠标悬停时改变SVG图标的制作

htmlcsssvg
5
这是我的Bootstrap菜单中的菜单项：
<li class="nav-item">
 <a href="#" class="icon"><span class="number">1</span>
   <img src="images/svg-icons/notifications-active.svg" alt="" />
 </a>
</li>

正如您所看到的，有一个带有“icon”类的SVG图像被引入。

以下是我认为会使其切换到不同颜色的CSS：

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

你知道我做错了什么吗？还是它不像那样工作？

谢谢！

你可能发现，它悬停在 li 而不是 a 上。试试 .nav-item:hover .icon{ 或 .nav-item:hover .icon img {。但要注意，如果您多次使用 nav-item 类，则可能会产生意外结果，例如影响所有具有该类引用的元素。 - EGC
1
你不能在img标签中动画svg。更好的方法是使用内联或使用标签来动画svg。https://css-tricks.com/using-svg/ - user7637140
1
你可以尝试添加“过滤器”而不是“填充”。 http://angrytools.com/css-generator/filter/ - zPOKOin
CSS不适用于跨文档，即它不适用于img标签的内容，因为它们是单独的文档。 - Robert Longson
3个回答
2

内联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>

0

您需要使用2个SVG图像。第一张图像使用SVG默认颜色，第二张图像使用SVG悬停颜色。使用2张图片并不是一个好主意。

您可以使用以下方法：添加JQUERY和svg-img.js

/*
  * svg-img.js
  * Replace all SVG images with inline SVG
  */
 $(function() {$('img.svg').each(function() {
         var $img = $(this);
         var imgID = $img.attr('id');
         var imgClass = $img.attr('class');
         var imgURL = $img.attr('src');$.get(imgURL, function(data) {
             // Get the SVG tag, ignore the rest
             var $svg = $(data).find('svg');// Add replaced image's ID to the new SVG
             if (typeof imgID !== 'undefined') {
                 $svg = $svg.attr('id', imgID);
             }
             // Add replaced image's classes to the new SVG
             if (typeof imgClass !== 'undefined') {
                 $svg = $svg.attr('class', imgClass + ' replaced-svg');
             }// Remove any invalid XML tags as per http://validator.w3.org
             $svg = $svg.removeAttr('xmlns:a');// Replace image with new SVG
             $img.replaceWith($svg);}, 'xml');});})
/*
  * style.css
  */
.svg {
    width: 100px;
    height: 100px;
}svg path,
svg circle {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
}svg:hover path {
    fill: red;
}
<html><head>
    <meta charset="UTF-8">
    <title>SVG</title>
    <link href="style.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script  src="svg-img.js"></script>
</head>
<body>
<h1>SVG img tag hover</h1>
<img src="https://raw.githubusercontent.com/asadalikanwal/imgtosvg/master/img/icon-play.svg" class="svg" />
</body>
</html>

3
我认为你建议解决SVG悬停颜色的额外步骤有点多。 - Tim Vermaelen
好的。但是这可以帮助在网站的任何地方添加带有悬停效果的更多图标，无需添加单独的代码（CSS或JavaScript）；只需要添加img（svg链接）。 - Jone Milka
0

这里有一个很好的工具，可以提供你的SVG颜色：
https://codepen.io/sosuke/pen/Pjoqqp

SCSS

.nav-item {
    .icon {
        img {
            transition: all .2s ease-in-out;
        }

        &:hover,
        &:active,
        &:focus {
            img {
                filter: invert(37%) sepia(63%) saturate(1879%) hue-rotate(321deg) brightness(90%) contrast(89%);
                //filter: grayscale(100%);
            }
        }
    }
}

工作原理.
一个很好的文章入门：
https://css-tricks.com/the-many-ways-to-change-an-svg-fill-on-hover-and-when-to-use-them/

基本上，您从深色基础颜色（黑色）开始，并使用棕褐色滤镜引入颜色。然后伴随多个滤镜尝试匹配十六进制颜色。在大多数情况下，它是一个接近的匹配。

浏览器支持
现在几乎都是最新的（>= IE10）：
https://caniuse.com/#search=svg%20filter

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接