为什么悬停

Question

我用下面的标记这个SVG变化的背景路径：

<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> 

及以下样式：

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

结果显示，我穿上”行为不明白。 为什么第一个svg的背景路径在悬停时改变颜色以匹配第二个svg的颜色？无论首先放置哪个svg，此行为都是一致的。第一个svg（Github图标）是Zurb's webicons的一部分。这是一个Codepen，它说明了有问题的问题。请注意，我正在使用Bootstrap。

Answer 1

您有两个渐变具有相同的ID #SVGID_1_，这是XML文件中的非法。每个SVG中有一个：

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

两条路径引用它。这可能会让浏览器产生奇怪的表现。看起来，当链接上发生了hover事件时引用了不同的渐变对象，导致颜色发生变化（我不确定）。不同的算法可能会在不同的时刻选择一个或另一个，因为他们希望ID是唯一的。

如果您为每个渐变使用不同的ID，则问题不会发生。