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图像，这样颜色就不会从初始图像流到后面的图像？

三江源

Answer 1

问题是两个SVG都有一个<linearGradient>元素id="SVGID_1_"。 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”。

内联SVG颜色 - 第一个颜色显示在第二个上

1 个答案: