4

我们在应用程序中大量使用内联 SVG。最近我发现了不需要的行为（尤其是在 Firefox 中，但我在 Chrome 中看到了类似的问题），其中来自不同 svg 的样式可能会相互干扰。我将我当前的问题追踪到使用“显示：无”。

为了说明我的问题，请参阅下面附加的 HTML。这包含两个圆形的德国国旗，第一个是隐藏的。在 chrome 中，您会看到一个圆形的德国国旗（这是正确的）。在 Firefox 中，您会看到一个方形的德国国旗（这是不正确的）。如果您删除第一个 div 上的 display: none，则两个标志都正确显示（圆形），或者如果您删除整个第一个 div，第二个标志将正确显示（圆形）。

为什么在第一次出现 svg 时显示 none 导致第二次出现错误？

我想我可以通过在两个 svg 中使用不同的 id 来解决这个问题，但是由于我想将它们包含在一个包含内联 svg 的通用 html 文件中的多个页面上，所以目前这是非常不切实际的。

<html>
<body>

<div style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
    <defs>
        <circle id="bundesliga-a" cx="-52" cy="-52" r="32"/>
    </defs>
    <clipPath id="bundesliga-b">
        <use xlink:href="#bundesliga-a" overflow="visible"/>
    </clipPath>
    <g clip-path="url(#bundesliga-b)">
        <path fill="#FFF"
            d="M3.9 2.7S5.5.4 5-.5C4.5-1.6-8-14.2-8-14.2c.5-.9.7-1.8 1.1-2.7-1.4-1.6-1.6-3.6-.9-6.2.7-2.7 5.7-19.4-.7-31 .7-1.6 2.1-4.8 2.5-11.6 1.1-12.8-6.6-21-17.1-21-6.6 0-16.2-.5-20.1-2.3-8.5-4-10.6-14.3-6.9-17.2l.2-.2c1.1-.7 3-.2 5 .5 1.6.5 3.2.9 5 .7h.7c10.3-1.4 9.6-10.3 9.6-10.3 0 1.6-2.3 1.8-2.7 2.1-3.2.5-7.5-.7-9.8-.7-.9 0-2.7.5-3.2.7-5.7 2.1-12.5 7.3-10.5 16.2 2.1 9.3 8.4 11.8 15 12.8.5 0 .9.2 1.1.2 3.9.7 8 .9 11.8 1.6 17.1 2.5 13.9 18.2 12.3 23-3.6-1.1-11.7 5.3-15.3 5.5-2.7.1-6.7-8.9-7.4-10.6 9.1 3.2 17.3-.9 18.2-1.8 1.4-.9.2-1.1-1.8-1.1-8.2.2-10.5-5-16.9-8.7-2.2-1.2-5.6-2.5-9.2-3.2l-5.8-6.7c-2.9-2.5-6.6-3.8-10.2-3.4-4.6.5-12.8 6.2-18.3 12.3-5.5 6.4-8.2 10-9.3 14.6-.7 2.7-.5 7.3-.5 7.3-5.7 6.8-2.3 21-2.3 21s-5.2 8.7-3 21.9c.7 4.6-.9 9.8-1.6 12.3-.2.9-.5 1.1-.9 1.4-.5.5-2.5 2.1-3 3.2-.7 1.8.7 3 .7 3-6.2 4.3-6.9 8.6-6.9 8.6s.9.2 2.3.5h.5c10 1.4 14.1-1.1 14.1-1.1 1.8-4.6-.4-7-.4-7s1.8-.2 2.5-2.1c.5-1.4-.5-2.7-.5-2.7.5-1.8 3-10.9 11.4-15 0 0 3 3 5 3.4 2.7.7 6.8-.7 6.8-.7.7 2.1.9 4.6.9 4.6S-72.2-6.2-77.3-3c.2 1.6 4.1 10 11.8 10.7h.9c.7 0 1.4 0 2.1-.2 5.9-1.1 10-11.5 12.2-19.9 1.8-.5 2.7-.7 4.3-1.4 1.1.9 2.1 2.6 2.1 3.6-.1 1.3-1 3.1-2.1 4.2-1.4 1.6-2.7 2.3-3 3.4-.2 1.4.5 2.3.5 2.3s-1.4.7-3 2.5c-3 3.4-3.3 5.6-3.3 5.6.9.2 2.5.5 2.5.5 5 .5 10 .6 11.5-.6 0 0 .7-3-.5-5.5.9 0 1.1-.7 1.5-.9 1.8-1.1 1.4-3.4 1.4-3.4.9-1.6 3.9-7.1 5.2-8.2 1.6-.9 2.7-1.6 3.4-3.6.5-1.6-.2-2.9-1.1-3.9.2.1.6.1 1.2 0 .7.5 2.3 1.8 4.4 1.7 3.2-.1 4.2-2.4 4.2-2.4s1.8 2.7 4.8 4.8c3.6 2.5 4.3 3 5.7 4.6 2.1 2.3 3 3.4 4.1 5.7C-4.7.7-4.4 4.3-3.1 5c1.8.9 5.5.7 5.7.5 2.6-2.1 1.3-2.8 1.3-2.8z"/>
        <path fill="#D42329"
            d="M7.2-1.2L5.4-3c-.5-.5.5-2.3-.9-3.4C2.9-7.8 1.8-7.1.4-8.5c-4.3-4.1-4.3-4.1-5.5-7.1-.5-1.4-1.6-4.8-.9-7.5s4.1-19.4-2.3-31c.7-1.6 2.1-4.8 2.5-11.6.9-12.7-6.8-21.1-17.1-21.1-6.6 0-16.2-.5-19.8-2.3-8.6-4.1-10.7-14.1-7.3-16.9l.2-.2c2.3-1.4 6.2 1.4 10 .9h.7c10.3-1.4 9.6-10.3 9.6-10.3-.9 1.6-3.2 2.1-3.6 2.1-3.2.5-5-.7-9.8-.7-.9 0-1.8.2-2.7.5-.2 0-.2 0-.5.2-5.5 2.1-11.2 8.9-8.7 17.1s7.8 10.7 13.3 11.8c.5 0 .9.2 1.1.2 3.9.7 8 .9 11.8 1.4.5 0 .9.2 1.4.2 20.1 3.6 12.8 23.2 12.8 23.2-.5-.2-.9-.5-1.6-.7-3.7-.9-9.9-.7-13.2-.7-2.1 0-3.2-.5-5-1.6-1-.6-3-.8-3.9-1.6.9 2.1.7 3.1.2 5.6 0 0 2.7 4.1 2.7 7.2 0 2.1-5.7 5.5-5.7 5.5s-2.3 7.5-3 9.6c-.5 1.8.9 6.2.2 7.7-.7 1.6-4.1 3.6-6.8 4.3-3.2.7-4.1-1.1-4.6-1.6-.7-.2-4.6 0-5.9-.2-1.8-.2-3.2-.9-3.9-3-.7-2.3-1.4-3.9-2.3-4.1-2.5-.5-4.8-1.4-6.8-3-2.1-1.6-3.9-7.1-4.3-9.8-2.6 3.1-2 10-1.5 11.7 3.4 2.6 0 21.3 7.5 24.5 2.3 1.1 4.1.2 5.5-.5-.9-3-3.2-6.8-3.2-6.8s2.7 0 5 2.5c.7.9 2.7 7.5.5 15 0 0-.2-2.7-.5-3.9 0 0-3.2-1.8-8.4.7 0 .9 3.4 9.6 10 9.8.7 0 1.4 0 2.1-.2 5.9-1.1 9.8-10.7 11.8-19.1 1.7-.5 3.2-1 5-1.6 3.9-1.6 7.1-3.9 9.1-6.4-1.1 4.3-6.2 7.1-6.2 7.1.5.7.7 1.8.5 3-.2 1.4-1.8 3.6-2.7 4.8-.7.7-1.4 1.4-1.8 2.1-.7 1.1-.5 2.5.2 3 0 0-4.1 2.5-6.4 8.9 4.8.5 10.3-.2 11.8-1.4 0 0 .7-3-.5-5.5.9 0 1.4-.2 1.8-.5 1.8-1.4 1.1-3.9 1.1-3.9.9-1.6 3.6-7.3 5.2-8.2 1.6-.9 2.7-1.6 3.4-3.6.5-1.6-.2-3-1.1-3.9l-.2-.2c-2.5-2.7.9-5.9 1.4-9.3 1.1 1.6.2 3.6 0 5.2-.2 1.8-.5 4.1 1.6 5.2.7.5 1.8.7 3.2.5 3.2 0 3.9-2.1 3.9-2.1-5.7-5.9-6.4-10.6-5.5-13.2 1.5-4.5 5.1-9.3 5.1-9.3-1.1 3.6-3.7 7-2.8 11.8.9 5 4.3 9.3 7.7 13 2.5 2.5 6.4 4.6 7.7 6.6C-1.8-1.5-3.7-2.7-2.8.5c.5 1.8 1.1 2.1 3 2.3 1.1 0 .9.7 2.7-.2C4.3 1.9 5 .8 5 .8s3.1-1.3 2.2-2z"/>
    </g>
    <g>
        <defs>
            <circle id="bundesliga-c" cx="32" cy="32" r="32"/>
        </defs>
        <clipPath id="bundesliga-d">
            <use xlink:href="#bundesliga-c" overflow="visible"/>
        </clipPath>
        <circle clip-path="url(#bundesliga-d)" fill="#D12028" cx="32" cy="32" r="32"/>
        <defs>
            <circle id="bundesliga-e" cx="32" cy="32" r="32"/>
        </defs>
        <clipPath id="bundesliga-f">
            <use xlink:href="#bundesliga-e" overflow="visible"/>
        </clipPath>
        <path clip-path="url(#bundesliga-f)" fill="#EEC258" d="M0 43.2h64V64H0z"/>
        <g>
            <defs>
                <circle id="bundesliga-g" cx="32" cy="32" r="32"/>
            </defs>
            <clipPath id="bundesliga-h">
                <use xlink:href="#bundesliga-g" overflow="visible"/>
            </clipPath>
            <path clip-path="url(#bundesliga-h)" fill="#292929" d="M0 0h64v20.8H0z"/>
        </g>
        <g>
            <defs>
                <circle id="bundesliga-i" cx="32" cy="32" r="32"/>
            </defs>
            <clipPath id="bundesliga-j">
                <use xlink:href="#bundesliga-i" overflow="visible"/>
            </clipPath>
            <path opacity=".07" clip-path="url(#bundesliga-j)" fill="#292929" d="M17.6 64H0V0h40"/>
        </g>
    </g>
</svg>
</div>

<div>
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
    <defs>
        <circle id="bundesliga-a" cx="-52" cy="-52" r="32"/>
    </defs>
    <clipPath id="bundesliga-b">
        <use xlink:href="#bundesliga-a" overflow="visible"/>
    </clipPath>
    <g clip-path="url(#bundesliga-b)">
        <path fill="#FFF"
            d="M3.9 2.7S5.5.4 5-.5C4.5-1.6-8-14.2-8-14.2c.5-.9.7-1.8 1.1-2.7-1.4-1.6-1.6-3.6-.9-6.2.7-2.7 5.7-19.4-.7-31 .7-1.6 2.1-4.8 2.5-11.6 1.1-12.8-6.6-21-17.1-21-6.6 0-16.2-.5-20.1-2.3-8.5-4-10.6-14.3-6.9-17.2l.2-.2c1.1-.7 3-.2 5 .5 1.6.5 3.2.9 5 .7h.7c10.3-1.4 9.6-10.3 9.6-10.3 0 1.6-2.3 1.8-2.7 2.1-3.2.5-7.5-.7-9.8-.7-.9 0-2.7.5-3.2.7-5.7 2.1-12.5 7.3-10.5 16.2 2.1 9.3 8.4 11.8 15 12.8.5 0 .9.2 1.1.2 3.9.7 8 .9 11.8 1.6 17.1 2.5 13.9 18.2 12.3 23-3.6-1.1-11.7 5.3-15.3 5.5-2.7.1-6.7-8.9-7.4-10.6 9.1 3.2 17.3-.9 18.2-1.8 1.4-.9.2-1.1-1.8-1.1-8.2.2-10.5-5-16.9-8.7-2.2-1.2-5.6-2.5-9.2-3.2l-5.8-6.7c-2.9-2.5-6.6-3.8-10.2-3.4-4.6.5-12.8 6.2-18.3 12.3-5.5 6.4-8.2 10-9.3 14.6-.7 2.7-.5 7.3-.5 7.3-5.7 6.8-2.3 21-2.3 21s-5.2 8.7-3 21.9c.7 4.6-.9 9.8-1.6 12.3-.2.9-.5 1.1-.9 1.4-.5.5-2.5 2.1-3 3.2-.7 1.8.7 3 .7 3-6.2 4.3-6.9 8.6-6.9 8.6s.9.2 2.3.5h.5c10 1.4 14.1-1.1 14.1-1.1 1.8-4.6-.4-7-.4-7s1.8-.2 2.5-2.1c.5-1.4-.5-2.7-.5-2.7.5-1.8 3-10.9 11.4-15 0 0 3 3 5 3.4 2.7.7 6.8-.7 6.8-.7.7 2.1.9 4.6.9 4.6S-72.2-6.2-77.3-3c.2 1.6 4.1 10 11.8 10.7h.9c.7 0 1.4 0 2.1-.2 5.9-1.1 10-11.5 12.2-19.9 1.8-.5 2.7-.7 4.3-1.4 1.1.9 2.1 2.6 2.1 3.6-.1 1.3-1 3.1-2.1 4.2-1.4 1.6-2.7 2.3-3 3.4-.2 1.4.5 2.3.5 2.3s-1.4.7-3 2.5c-3 3.4-3.3 5.6-3.3 5.6.9.2 2.5.5 2.5.5 5 .5 10 .6 11.5-.6 0 0 .7-3-.5-5.5.9 0 1.1-.7 1.5-.9 1.8-1.1 1.4-3.4 1.4-3.4.9-1.6 3.9-7.1 5.2-8.2 1.6-.9 2.7-1.6 3.4-3.6.5-1.6-.2-2.9-1.1-3.9.2.1.6.1 1.2 0 .7.5 2.3 1.8 4.4 1.7 3.2-.1 4.2-2.4 4.2-2.4s1.8 2.7 4.8 4.8c3.6 2.5 4.3 3 5.7 4.6 2.1 2.3 3 3.4 4.1 5.7C-4.7.7-4.4 4.3-3.1 5c1.8.9 5.5.7 5.7.5 2.6-2.1 1.3-2.8 1.3-2.8z"/>
        <path fill="#D42329"
            d="M7.2-1.2L5.4-3c-.5-.5.5-2.3-.9-3.4C2.9-7.8 1.8-7.1.4-8.5c-4.3-4.1-4.3-4.1-5.5-7.1-.5-1.4-1.6-4.8-.9-7.5s4.1-19.4-2.3-31c.7-1.6 2.1-4.8 2.5-11.6.9-12.7-6.8-21.1-17.1-21.1-6.6 0-16.2-.5-19.8-2.3-8.6-4.1-10.7-14.1-7.3-16.9l.2-.2c2.3-1.4 6.2 1.4 10 .9h.7c10.3-1.4 9.6-10.3 9.6-10.3-.9 1.6-3.2 2.1-3.6 2.1-3.2.5-5-.7-9.8-.7-.9 0-1.8.2-2.7.5-.2 0-.2 0-.5.2-5.5 2.1-11.2 8.9-8.7 17.1s7.8 10.7 13.3 11.8c.5 0 .9.2 1.1.2 3.9.7 8 .9 11.8 1.4.5 0 .9.2 1.4.2 20.1 3.6 12.8 23.2 12.8 23.2-.5-.2-.9-.5-1.6-.7-3.7-.9-9.9-.7-13.2-.7-2.1 0-3.2-.5-5-1.6-1-.6-3-.8-3.9-1.6.9 2.1.7 3.1.2 5.6 0 0 2.7 4.1 2.7 7.2 0 2.1-5.7 5.5-5.7 5.5s-2.3 7.5-3 9.6c-.5 1.8.9 6.2.2 7.7-.7 1.6-4.1 3.6-6.8 4.3-3.2.7-4.1-1.1-4.6-1.6-.7-.2-4.6 0-5.9-.2-1.8-.2-3.2-.9-3.9-3-.7-2.3-1.4-3.9-2.3-4.1-2.5-.5-4.8-1.4-6.8-3-2.1-1.6-3.9-7.1-4.3-9.8-2.6 3.1-2 10-1.5 11.7 3.4 2.6 0 21.3 7.5 24.5 2.3 1.1 4.1.2 5.5-.5-.9-3-3.2-6.8-3.2-6.8s2.7 0 5 2.5c.7.9 2.7 7.5.5 15 0 0-.2-2.7-.5-3.9 0 0-3.2-1.8-8.4.7 0 .9 3.4 9.6 10 9.8.7 0 1.4 0 2.1-.2 5.9-1.1 9.8-10.7 11.8-19.1 1.7-.5 3.2-1 5-1.6 3.9-1.6 7.1-3.9 9.1-6.4-1.1 4.3-6.2 7.1-6.2 7.1.5.7.7 1.8.5 3-.2 1.4-1.8 3.6-2.7 4.8-.7.7-1.4 1.4-1.8 2.1-.7 1.1-.5 2.5.2 3 0 0-4.1 2.5-6.4 8.9 4.8.5 10.3-.2 11.8-1.4 0 0 .7-3-.5-5.5.9 0 1.4-.2 1.8-.5 1.8-1.4 1.1-3.9 1.1-3.9.9-1.6 3.6-7.3 5.2-8.2 1.6-.9 2.7-1.6 3.4-3.6.5-1.6-.2-3-1.1-3.9l-.2-.2c-2.5-2.7.9-5.9 1.4-9.3 1.1 1.6.2 3.6 0 5.2-.2 1.8-.5 4.1 1.6 5.2.7.5 1.8.7 3.2.5 3.2 0 3.9-2.1 3.9-2.1-5.7-5.9-6.4-10.6-5.5-13.2 1.5-4.5 5.1-9.3 5.1-9.3-1.1 3.6-3.7 7-2.8 11.8.9 5 4.3 9.3 7.7 13 2.5 2.5 6.4 4.6 7.7 6.6C-1.8-1.5-3.7-2.7-2.8.5c.5 1.8 1.1 2.1 3 2.3 1.1 0 .9.7 2.7-.2C4.3 1.9 5 .8 5 .8s3.1-1.3 2.2-2z"/>
    </g>
    <g>
        <defs>
            <circle id="bundesliga-c" cx="32" cy="32" r="32"/>
        </defs>
        <clipPath id="bundesliga-d">
            <use xlink:href="#bundesliga-c" overflow="visible"/>
        </clipPath>
        <circle clip-path="url(#bundesliga-d)" fill="#D12028" cx="32" cy="32" r="32"/>
        <defs>
            <circle id="bundesliga-e" cx="32" cy="32" r="32"/>
        </defs>
        <clipPath id="bundesliga-f">
            <use xlink:href="#bundesliga-e" overflow="visible"/>
        </clipPath>
        <path clip-path="url(#bundesliga-f)" fill="#EEC258" d="M0 43.2h64V64H0z"/>
        <g>
            <defs>
                <circle id="bundesliga-g" cx="32" cy="32" r="32"/>
            </defs>
            <clipPath id="bundesliga-h">
                <use xlink:href="#bundesliga-g" overflow="visible"/>
            </clipPath>
            <path clip-path="url(#bundesliga-h)" fill="#292929" d="M0 0h64v20.8H0z"/>
        </g>
        <g>
            <defs>
                <circle id="bundesliga-i" cx="32" cy="32" r="32"/>
            </defs>
            <clipPath id="bundesliga-j">
                <use xlink:href="#bundesliga-i" overflow="visible"/>
            </clipPath>
            <path opacity=".07" clip-path="url(#bundesliga-j)" fill="#292929" d="M17.6 64H0V0h40"/>
        </g>
    </g>
</svg>
</div>

</body>
</html>
4

1 回答 1

4

好的，自从发布这个问题以来，我一直与我公司的其他几个人保持联系，我们一起解决了这个问题。

首先是问题： 当您使用内联 svg 并且一个特定的 svg 被包含两次并且这个特定的 svg 使用 id 引用（例如对定义的 clipPath）并且第一个 svg（至少在 firefox 上）在带有显示的 html 元素内:none.. THEN id 引用在该 svg 的第二次出现引用了第一个（隐藏的）svg 中的 clipPath，这导致 clipPath 不显示，因此圆形图标变为方形。

现在我的临时解决方案： 导致此问题的许多图标都多次定义了完全相同的 clipPath。我在页面主体的顶部包含了一个“虚拟”svg，定义了这个确切的clipPath：

<svg width="0" height="0" style="position: absolute;"><clipPath id="circle-32"><circle cx="32" cy="32" r="32"/></clipPath></svg>

然后我从所有有问题的 svg 中删除了所有 clipPath 定义，并将它们替换为对 #circle-32 clipPath 的引用。

这导致再次工作 svg :)

长期解决方案： 我们决定我们的设计师需要花费更多时间来创建/导出不使用这么多 clipPath 引用（或其他引用）的正确 svg，并且将来我们将用重绘替换整个 svg 集正确导出以供 Web 使用的图像并最小化这些结构。

建议我将这篇博文转发给我们的设计师，其中包含有关如何创建适当 svg 的提示： https ://sarasoueidan.com/blog/svg-tips-for-designers/

于 2016-12-15T12:48:09.127 回答