悬停时更改基础 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

Answer 2

您不能更改通过 IMG 标签包含的 SVG 的颜色。您只能通过 CSS.

修改内联 SVG

但 Zurb Foundation 图标通常包含为网络字体，其中每个图标只是一个简单的文本字符，可以像任何其他文本一样设置样式。通过 IMG 标签包含单个 SVG 图标的想法偏离了 Foundation 文档。请参阅上面链接的文档文章中的“如何使用”部分……

悬停时更改基础 svg 颜色

Change foundation svg color on hover

css

zurb-foundation