Question

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

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

有关在悬停时更改颜色的想法吗？

Answer 1

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

您需要将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

Answer 2

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

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

在悬停时更改基础svg颜色

2 个答案: