Change foundation svg color on hover

Question

Hello so I've seen a lot of codes regarding the hover color change on svg's but I can't get it to work. The thing is I am using foundation icons, and here is a sample code:

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

Any idea on changing the color on hover?

score 1 · Accepted Answer · edited May 23 '17 at 12:14

1

You have to convert the SVG into a native <svg> tag and then you need to apply DOM traversal and CSS to change it. I have a quick snippet, that I modified from elsewhere, and you can use it to change the properties.

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!

Reference: img src SVG changing the fill color

edited May 23 '17 at 12:14

Community

1
1

answered Jun 05 '15 at 12:31

Praveen Kumar Purushothaman

164,888
24
203
252

.logo-img path { fill: #000; } I don't understand this, where did you get .logo-img path? – wobsoriano Jun 05 '15 at 12:35
You can set a background color to the svg element itself, assuming there isn't a path or rect covering the full svg area. – Anthony Jun 05 '15 at 12:35
@FewFlyBy That's a reference from the original answer, I just gave you a guidance to do it. Not writing the code for you, none of us do that! `:)` – Praveen Kumar Purushothaman Jun 05 '15 at 12:37
@FewFlyBy Clarified the reference. Have a look! – Praveen Kumar Purushothaman Jun 05 '15 at 12:38
@PraveenKumar so my code will look like now right? – wobsoriano Jun 05 '15 at 12:52
@FewFlyBy Yup! You got it right. Do it and let me know... `:)` – Praveen Kumar Purushothaman Jun 05 '15 at 12:54
Still doing it, nothing happens. haha will tell you right away – wobsoriano Jun 05 '15 at 12:54
Sure... Give me a shout! – Praveen Kumar Purushothaman Jun 05 '15 at 12:55
The img is wrapped in an .. Does it matter> – wobsoriano Jun 05 '15 at 12:56
Thank you for your code but this is the one I have used http://jsfiddle.net/wuSF7/31/ – wobsoriano Jun 05 '15 at 13:03

score 0 · Answer 2 · answered Jun 05 '15 at 12:34

You cannot change the color of an SVG that is included via an IMG tag. You can only modify inline SVG through CSS.

But the Zurb Foundation Icons are normally included as web-font, where each icon is just a simple text character, which can be styled as any other text. The idea to include a single SVG icon via an IMG tag deviates from the Foundation documentation. Please refer to the „How to use“ section in the docs-article you linked above…

Change foundation svg color on hover

2 Answers2

Linked