内联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”。