內聯SVG顏色 - 從第一個顏色出現在第二個

Question

我只是在學習如何使用Inline SVG，而我目前正在JSFiddle上進行測試。

我發現如果我把2個內聯SVG放到同一頁面上，第一個顏色就會出現在第二個上。例如：如果第一張圖像爲藍色，第二張圖像爲灰色，則第二張圖像將顯示爲藍色。

這裏是一個單一的jsfiddle聯SVG圖像即灰色：http://jsfiddle.net/txav2pve/

這裏是一個的jsfiddle聯SVG * 2，其中所述第一圖像爲藍色，第二個是一些灰色圖像顯示以上，但它出現藍色： http://jsfiddle.net/mmut46pt/

例如：這裏是灰聯SVG代碼：

<h1>Some sort of title</h1> 

<p>How now brown cow. The quick brown fox jumps over the lazy dog.</p> 

<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" 
    width="265.427px" height="105.59px" viewBox="0 0 265.427 105.59" enable-background="new 0 0 265.427 105.59" 
    xml:space="preserve"> 
<g id="Edit_Button_1_"> 
    <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="132.7144" y1="10.8496" x2="132.7144" y2="90.4107"> 
     <stop offset="0.099" style="stop-color:#F5F6F6"/> 
     <stop offset="0.8267" style="stop-color:#E9E9E9"/> 
    </linearGradient> 

     <rect x="0.474" y="0.474" fill="url(#SVGID_1_)" stroke="#CDCCCC" stroke-width="0.9479" stroke-miterlimit="10" width="264.479" height="104.643"/> 
    <g> 
     <g> 
      <g> 
       <g> 
        <polygon fill="#6F6F6F" points="27.945,62.067 20.953,83.479 42.234,76.368     "/> 
       </g> 
       <g> 
        <path fill="#6F6F6F" d="M67.206,22.81c3.765-3.827,9.988-3.805,14.024,0.166c4.024,3.969,4.154,10.186,0.39,14.013 
         L67.206,22.81z"/> 
       </g> 
       <polygon fill="#6F6F6F" points="45.999,72.609 31.698,58.312 62.865,27.153 77.16,41.45    "/> 
      </g> 
     </g> 
    </g> 
    <text transform="matrix(1 0 0 1 100.8813 74.3232)" fill="#6F6F6F" font-family="'Verdana'" font-size="57.8802">EDIT</text> 
</g> 
</svg> 

我不知道我怎麼能在一個頁面上有多個內嵌SVG圖像包含這樣的顏色不會從inital IMA流血後來的圖像？

三江源

Answer 1

的問題是，既SVGs具有id="SVGID_1_"一個<linearGradient>元件。 id屬性應該在頁面上是唯一的。不同的瀏覽器以不同的方式處理衝突ID。因此，您的示例在Chrome上可以正常工作，但在FF上已損壞。在FF中，第二個SVG使用第一個SVG的漸變定義。

您需要確保沒有兩個在同一頁面內聯的SVG具有重複的ID。您可能需要手動編輯一個或多個SVG才能實現此目的。

因此，例如，here is a version of your broken example，做在FF工作：

要使其工作，我改變了梯度第二SVG從「SVGID_1_」到「SVGID_1_xxx」。