Встроенный SVG не отображается правильно в Firefox после отображения ничего, почему?

Мы активно используем встроенные SVG в нашем приложении. Недавно я обнаружил нежелательное поведение (особенно в Firefox, но я видел похожие проблемы в Chrome), где стилизация из разных svg может мешать друг другу. Я отследил свою текущую проблему вплоть до использования "display: none".

Чтобы проиллюстрировать мою проблему, см. Прикрепленный HTML-код ниже. Это содержит два круглых немецких флага, первый скрыт. В хроме вы увидите круглый немецкий флаг (что правильно). В Firefox вы увидите квадратный немецкий флаг (что неверно). Если вы удалите отображение: нет в первом div, оба флага будут отображаться правильно (округлено) или если вы удалите весь первый div, второй флаг будет отображаться правильно (округление).

Почему при первом появлении svg не отображается ни один из параметров, из-за чего второе вхождение отображается неправильно?

Я решил, что могу обойти эту проблему, используя разные идентификаторы в обоих svg, но, поскольку я хочу включить их на нескольких страницах из общего html-файла, который содержит встроенный svg, на данный момент это практически нецелесообразно.

<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>
Источник

1 ответ

Решение

Хорошо, с момента публикации этого вопроса я связался с несколькими другими людьми в моей компании, и вместе мы решили это.

Первая проблема: когда вы используете встроенные svg и один конкретный svg включается дважды, и этот конкретный svg использует ссылки id (например, на определенный clipPath), а первый svg (по крайней мере, в firefox) находится внутри элемента html с отображением:none.. THEN ссылка id во втором вхождении этого svg ссылается на clipPath в первом (скрытом) svg, в результате чего clipPath не отображается, и, таким образом, круглый значок становится квадратным.

Теперь мое временное решение: у многих наших иконок, которые вызывали эту проблему, один и тот же clipPath определялся несколько раз. Я добавил svg 'dummy' в верхней части тела нашей страницы, определяя этот точный clipPath:

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

Затем я удалил все определения clipPath из всех наших проблемных svg и заменил их ссылками на #circle-32 clipPath.

Это привело к работе SVG снова:)

Долгосрочное решение: мы решили, что наш дизайнер должен тратить больше времени на создание / экспорт соответствующих svg, которые не используют столько ссылок clipPath (или других ссылок по этому вопросу), и в будущем мы заменим весь наш набор svg на redrawn изображения, которые правильно экспортируются для веб-использования и минимизируют эти конструкции.

Мне порекомендовали переслать этот пост с советами о том, как создать правильное svg для нашего дизайнера: https://sarasoueidan.com/blog/svg-tips-for-designers/

Источник
Другие вопросы по тегам