悬停时更改基础 svg 颜色答案

【问题标题】：Change foundation svg color on hover悬停时更改基础 svg 颜色
【发布时间】：2015-06-05 12:27:46
【问题描述】：

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

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

关于改变悬停颜色的任何想法？

【问题讨论】：

标签： css zurb-foundation

【解决方案1】：

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

您需要将 SVG 设为 内联 SVG。你可以利用这个脚本，通过向图像添加一个类svg：

/*
 * 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');

});

然后，现在如果你这样做：

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

或者可能是：

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

这行得通！

参考：img src SVG changing the fill color

【讨论】：

.logo-img 路径 { 填充：#000;我不明白这个，你从哪里得到 .logo-img 路径？
假设没有覆盖整个 svg 区域的路径或矩形，您可以为 svg 元素本身设置背景颜色。
@FewFlyBy 这是原始答案的参考，我只是给了你一个指导。不为您编写代码，我们都不会这样做！ :)
@FewFlyBy 澄清了参考。看看吧！
@PraveenKumar 所以我的代码现在看起来像对吧？

【解决方案2】：

您无法更改通过 IMG 标记包含的 SVG 的颜色。您只能通过 CSS 修改内联 SVG。

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

【讨论】：