css - 悬停时更改基础 svg 颜色

Question

你好，我已经看到很多关于 svg 上的悬停颜色变化的代码，但我无法让它工作。问题是我正在使用 foundation icons ，这是一个示例代码:

<img src="svgs/fi-mail.svg">

关于更改悬停时的颜色有什么想法吗？

Answer 1

您必须将 SVG 转换为原生 <svg>标签然后你需要应用DOM遍历和CSS来改变它。我有一个快速片段，是我从其他地方修改的，您可以使用它来更改属性。

You need to make the SVG to be an inline SVG. You can make use of this script, by adding a class svg to the image:

/*
 * Replace all SVG images with inline SVG
 */
jQuery('img.svg').each(function(){
    var $img = jQuery(this);
    var imgID = $img.attr('id');
    var imgClass = $img.attr('class');
    var imgURL = $img.attr('src');

    jQuery.get(imgURL, function(data) {
        // Get the SVG tag, ignore the rest
        var $svg = jQuery(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');

});

And then, now if you do:

.logo-img path {
  fill: #000;
}

Or may be:

.logo-img path {
  background-color: #000;
}

This works!

引用: img src SVG changing the fill color