I'm using Snap.svg in order to animate an SVG image on hover. In this case, I'm trying to make the image a little bit bigger (1.1x) and then change the fill color. On hover, the image scales correctly, but the fill color is unchanged. I have a suspicion it's because the image consists of three child elements which is where the fill colors reside, but I'm unable to figure out how to access them.

Here's the html:

<svg id="mySvg" width="200" height="200" 
 viewBox="0 0 2000 2000" preserveAspectRatio="none"></svg>

And here's the javascript:

var s = Snap("#mySvg");
            var g = s.group();
            var tux = Snap.load("3d_glasses.svg", function (loadedFragment) {
                g.append(loadedFragment);
                g.hover(hoverover, hoverout);
            });

            var hoverover = function () {
                g.animate({
                    transform: 'scale(1.1)',
                    fill: '#FF0000'
                }, 1000, mina.bounce);

            };
            var hoverout = function () {
                g.animate({
                    transform: 'scale(1)',
                    fill: '#252525'
                }, 1000, mina.bounce);
            };

My SVG image file (3d_glasses.svg) looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" ".1/DTD/svg11.dtd">
<svg xmlns="" xml:space="preserve" width="1024px" height="1024px" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="nonzero" clip-rule="evenodd" viewBox="0 0 10240 10240" xmlns:xlink="">
    <title>3D_glasses icon</title>
    <path id="curve2" fill="#252525" d="M6669 6080c-89,-175 -174,-356 -261,-531 -39,-78 -85,-152 -137,-222 -131,-175 -191,-356 -191,-575l0 -592 2560 0 0 1920 -1971 0z"/>
    <path id="curve1" fill="#252525" d="M3571 6080c89,-175 174,-356 261,-531 39,-78 85,-152 137,-222 131,-175 191,-356 191,-575l0 -592 -2560 0 0 1920 1971 0z"/>
    <path id="curve0" fill="#252525" d="M960 3200l8320 0c176,0 320,144 320,320l0 3200c0,176 -144,320 -320,320l-2804 0c-249,0 -462,-132 -573,-354l-354 -707c-83,-167 -243,-266 -429,-266 -186,0 -346,99 -429,266l-354 707c-111,222 -324,354 -573,354l-2804 0c-176,0 -320,-144 -320,-320l0 -3200c0,-176 144,-320 320,-320zm5162 2492c120,240 249,708 547,708l1971 0c176,0 320,-144 320,-320l0 -1920c0,-176 -144,-320 -320,-320l-2560 0c-176,0 -320,144 -320,320l0 592c0,288 83,536 255,767 41,54 76,113 107,173zm-2551 708c123,0 229,-65 285,-175 90,-177 174,-356 262,-533 31,-60 67,-119 107,-173 172,-231 255,-479 255,-767l0 -592c0,-176 -144,-320 -320,-320l-2560 0c-176,0 -320,144 -320,320l0 1920c0,176 144,320 320,320l1971 0z"/>
</svg>

I'm using Snap.svg in order to animate an SVG image on hover. In this case, I'm trying to make the image a little bit bigger (1.1x) and then change the fill color. On hover, the image scales correctly, but the fill color is unchanged. I have a suspicion it's because the image consists of three child elements which is where the fill colors reside, but I'm unable to figure out how to access them.

Here's the html:

<svg id="mySvg" width="200" height="200" 
 viewBox="0 0 2000 2000" preserveAspectRatio="none"></svg>

And here's the javascript:

var s = Snap("#mySvg");
            var g = s.group();
            var tux = Snap.load("3d_glasses.svg", function (loadedFragment) {
                g.append(loadedFragment);
                g.hover(hoverover, hoverout);
            });

            var hoverover = function () {
                g.animate({
                    transform: 'scale(1.1)',
                    fill: '#FF0000'
                }, 1000, mina.bounce);

            };
            var hoverout = function () {
                g.animate({
                    transform: 'scale(1)',
                    fill: '#252525'
                }, 1000, mina.bounce);
            };

My SVG image file (3d_glasses.svg) looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3/2000/svg" xml:space="preserve" width="1024px" height="1024px" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="nonzero" clip-rule="evenodd" viewBox="0 0 10240 10240" xmlns:xlink="http://www.w3/1999/xlink">
    <title>3D_glasses icon</title>
    <path id="curve2" fill="#252525" d="M6669 6080c-89,-175 -174,-356 -261,-531 -39,-78 -85,-152 -137,-222 -131,-175 -191,-356 -191,-575l0 -592 2560 0 0 1920 -1971 0z"/>
    <path id="curve1" fill="#252525" d="M3571 6080c89,-175 174,-356 261,-531 39,-78 85,-152 137,-222 131,-175 191,-356 191,-575l0 -592 -2560 0 0 1920 1971 0z"/>
    <path id="curve0" fill="#252525" d="M960 3200l8320 0c176,0 320,144 320,320l0 3200c0,176 -144,320 -320,320l-2804 0c-249,0 -462,-132 -573,-354l-354 -707c-83,-167 -243,-266 -429,-266 -186,0 -346,99 -429,266l-354 707c-111,222 -324,354 -573,354l-2804 0c-176,0 -320,-144 -320,-320l0 -3200c0,-176 144,-320 320,-320zm5162 2492c120,240 249,708 547,708l1971 0c176,0 320,-144 320,-320l0 -1920c0,-176 -144,-320 -320,-320l-2560 0c-176,0 -320,144 -320,320l0 592c0,288 83,536 255,767 41,54 76,113 107,173zm-2551 708c123,0 229,-65 285,-175 90,-177 174,-356 262,-533 31,-60 67,-119 107,-173 172,-231 255,-479 255,-767l0 -592c0,-176 -144,-320 -320,-320l-2560 0c-176,0 -320,144 -320,320l0 1920c0,176 144,320 320,320l1971 0z"/>
</svg>

• javascript
• svg
• snap.svg

Share Improve this question Follow asked Oct 1, 2014 at 23:33 Brent BarbataBrent Barbata 3,64133 gold badges2626 silver badges2323 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

defghi is correct in that the fill value of the elements is causing the issue.

I'm going to give an alternative answer though, and I guess its down to personal preference in terms of one may work better with the rest of your code and solution.

Rather than remove the fill, I would probably use a css transition, that way the original fills are left intact. So it would work something like...

s.select("g").hover( hoverFunc, hoverOut );

function hoverFunc() {
    this.selectAll('path').forEach( function( el ){
        el.attr({ class: 'redfadein' })  } );
    this.animate({ transform: 's1.1,1.1' }, 1000);
};

function hoverOut() {
    this.selectAll('path').forEach( function( el ){
        el.attr({ class: 'redfadeout' })  } );
    this.animate({ transform: 's1,1' }, 1000);
};

and css

redfadein {
    transition: fill 1s ease;
    fill:red;
 }

.redfadeout {
    transition: fill 1s ease;
 }

jsfiddle

You may also just want to put a white filled background (or small opacity) on the space in the middle of the path so it doesn't hover out when over the white space. You could also move the scale to css as well to keep it all in one place.

You should remove fill attributes from path elements in source SVG file.
When path elements have fill attribute, the fill value of g element contains these path is ignored for rendering.

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3/2000/svg" width="1024px" height="1024px" fill-rule="nonzero" viewBox="0 0 10240 10240" xmlns:xlink="http://www.w3/1999/xlink">
    <title>3D_glasses icon</title>
    <path id="curve2" d="M6669 6080c-89,..."/>
    <path id="curve1" d="M3571 6080c89,-175 174..."/>
    <path id="curve0" d="M960 3200..."/>
</svg>

If you can't edit SVG file, you can remove fill attributes by calling removeAttribute method of SVGDOM.