爲什麼懸停

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，則問題不會發生。