Why does the background path of this svg change on hover

Question

I'm using the following markup:

<a href="#">

<!-- first svg -->
 <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="23.9995" y1="0" x2="23.9995" y2="48.0005">
    <stop  offset="0" style="stop-color:#FFFFFF"/>
    <stop  offset="1" style="stop-color:#EAEAEA"/>
</linearGradient>
<path fill-rule="evenodd" clip-rule="evenodd" fill="url(#SVGID_1_)" d="M48,42c0,3.313-2.687,6-6,6H6c-3.313,0-6-2.687-6-6V6
    c0-3.313,2.687-6,6-6h36c3.313,0,6,2.687,6,6V42z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" d="M27.695,29.811c0,0,1.519,5.062,5.974,4.05
    c4.456-1.013,4.759-6.684,2.127-9.619C33.163,21.305,26.379,25.962,27.695,29.811z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.828,18.179c0,0-3.344,3.499-2.763,9.192
    c0.581,5.694,4.186,10.392,16.208,10.392c12.021,0,15.045-6.275,15.116-11.436c0.071-5.159-2.253-7.46-3.344-8.243
    c0,0,0.007-3.704-0.343-5.661c0,0-1.85-0.219-5.845,2.07c0,0-5.454-0.533-12.722,0.065c0,0-3.053-2.04-6.129-2.574
    C12.006,11.984,11.496,15.196,11.828,18.179z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#E2B89F" d="M17.211,23.815h14.916c0,0,4.227-0.475,4.227,6.44
    c0.034,6.086-11.139,5.693-11.139,5.693s-12.236,0.486-12.243-6.269C12.956,23.579,17.211,23.815,17.211,23.815z"/>
<g>
    <g>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="#9C584F" d="M30.767,26.591c0.959,0,1.737,1.25,1.737,2.787
            c0,1.54-0.778,2.788-1.737,2.788c-0.958,0-1.736-1.248-1.736-2.788C29.03,27.841,29.809,26.591,30.767,26.591z"/>
        <path fill="#FFFFFF" d="M30.767,32.666c-1.254,0-2.236-1.444-2.236-3.288c0-1.843,0.982-3.287,2.236-3.287
            c1.255,0,2.237,1.444,2.237,3.287C33.004,31.222,32.021,32.666,30.767,32.666z M30.767,27.091c-0.585,0-1.236,0.939-1.236,2.287
            c0,1.349,0.651,2.288,1.236,2.288s1.237-0.939,1.237-2.288C32.004,28.03,31.352,27.091,30.767,27.091z"/>
    </g>
</g>
<g>
    <g>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="#9C584F" d="M18.767,26.591c0.959,0,1.737,1.25,1.737,2.787
            c0,1.54-0.778,2.788-1.737,2.788c-0.958,0-1.736-1.248-1.736-2.788C17.03,27.841,17.809,26.591,18.767,26.591z"/>
        <path fill="#FFFFFF" d="M18.767,32.666c-1.254,0-2.236-1.444-2.236-3.288c0-1.843,0.982-3.287,2.236-3.287
            c1.254,0,2.237,1.444,2.237,3.287C21.004,31.222,20.021,32.666,18.767,32.666z M18.767,27.091c-0.585,0-1.236,0.939-1.236,2.287
            c0,1.349,0.651,2.288,1.236,2.288c0.585,0,1.237-0.939,1.237-2.288C20.004,28.03,19.352,27.091,18.767,27.091z"/>
    </g>
</g>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#9C584F" d="M24.076,32.705c0,0,0.499-1.418,1.109-0.089
    c0,0-0.457,0.297-0.285,0.996l1.428,0.546h-3.23l1.28-0.575C24.378,33.583,24.562,32.527,24.076,32.705z"/>
</svg>
</a>

<a href="#">
<!-- second svg -->
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 480 480" enable-background="new 0 0 480 480" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="261.3877" y1="161.9675" x2="261.3877" y2="173.4675" gradientTransform="matrix(41.667 0 0 41.667 -10651.2422 -6748.2861)">
    <stop  offset="0" style="stop-color:#EC9728"/>
    <stop  offset="1" style="stop-color:#DF4C18"/>
</linearGradient>
<path fill="url(#SVGID_1_)" d="M479.6,419.7c0,33.1-26.8,59.9-59.9,59.9H60.3c-33.1,0-59.9-26.8-59.9-59.9V60.3
    c0-33.1,26.8-59.9,59.9-59.9h359.4c33.1,0,59.9,26.8,59.9,59.9V419.7z"/>
<circle fill="#009245" cx="142.8" cy="139" r="92"/>
<circle fill="#D4145A" cx="304.8" cy="148" r="92"/>
<ellipse fill="#D9E021" cx="206.2" cy="320.8" rx="182.4" ry="137.8"/>
<ellipse fill="#0000FF" cx="388.6" cy="217.1" rx="69.8" ry="131.5"/>
</svg> 
</a>

and the following styling:

svg {
  display: inline-block;
  width: 64px;
  height: 64px;
}

The result displays a behavior which I don't understand. Why does the background path of the first svg change color on hover to match the color of the second svg? This behavior is consistent regardless of which svg is placed first. The first svg (Github icon) is part of Zurb's webicons . Here is a Codepen which illustrates the problem in question. Please note that I'm using Bootstrap .

Answer 1

You have two gradients with the same ID #SVGID_1_ , which is illegal in a XML file. One in each SVG:

<linearGradient id="SVGID_1_" ...> ... </linearGradient>

Two paths reference it. That is probably confusing the browser making it behave strangely. It seems that a different gradient object is referenced when the hover event over the link occurs, causing the change in color (I am not sure.) Different algorithms might select one or the other in different moments, since they expect the IDs to be unique.

If you use different IDs for each gradient the problem will not occur.

Answer 2

You have multiple layers on page with same id. This can happen after Adobe Illustrator export. As workaround you can include css properties directly in svg objects instead class styles.

When you save illustration as SVG, in SVG More Options make sure that in CSS Properties you have selected Presentation Atributes .