Идентификаторы фрагментов SVG заменяются в Safari при обслуживании через webapp

Я воспроизвел свою проблему на следующем простом примере

У меня есть простая веб-страница, например:

<html>
    <head></head>
    <body>  
        <img src="icons.svg#close"></img>
        <br>
        <img src="icons.svg#error"></img>
    </body>
</html>

Просмотр этой страницы локально в Safari, страница отображается правильно:

где значок закрытия появляется над значком ошибки.

Однако, когда я обслуживаю файл с помощью NodeJS webapp (или использую команду python SimpleHTTPServer) и просматриваю его в Safari, изображения находятся в разных местах:

хотя dom по-прежнему выглядит правильно, а атрибуты src каждого тега img содержат правильные пути.

Вот файл icons.svg:

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <style>:root>svg{display:none}:root>svg:target{display:block}</style>
    <svg viewBox="0 0 12 12" enable-background="new 0 0 12 12" id="close">
        <path d="M7.2 6l4.5-4.4c.4-.4.4-.9 0-1.3s-.9-.4-1.3 0L6 4.7 1.6.3C1.2-.1.7-.1.3.3s-.4.9 0 1.3L4.7 6 .3 10.4c-.4.4-.4.9 0 1.3.2.2.4.3.6.3s.5-.1.7-.3L6 7.3l4.4 4.4c.2.2.4.3.7.3.2 0 .5-.1.7-.3.4-.4.4-.9 0-1.3L7.2 6z" opacity=".3" enable-background="new"/>
    </svg>
    <svg viewBox="0 0 58 46" enable-background="new 0 0 58 46" id="error">
        <style type="text/css">.st0{fill:#ff9141}.st1{fill:#fff}</style>
        <path class="st0" d="M30.6 1c-.9-1.4-2.3-1.4-3.2 0L.4 43.5C-.5 44.9.2 46 1.8 46h54.4c1.7 0 2.3-1.1 1.4-2.5L30.6 1z"/>
        <path class="st1" d="M26.3 15.2h5.5V30h-5.5zM26.3 33.5h5.5v5.3h-5.5z"/>
    </svg>
</svg>

Страница отображается правильно во всех других браузерах, независимо от того, загружается ли файл локально или обслуживается через сервер.

Ответ 1

Это связано с неполной/ошибкой поддержки CSS-фрагмента SVG в Safari. Поддержка браузера для этой техники по-прежнему относительно неоднородна - см. https://css-tricks.com/svg-fragment-identifiers-work/

Текущие версии браузера Chrome/Safari/Opera (38/8/25) хорошо обрабатывают все методы HTML, но ни один из методов CSS, включая фоновое положение.

Вот как мои Safari 8 (слева) и Chrome (справа) отображают тестовую страницу - обратите внимание, что значки должны идти каждый раз:

Ниже приведены некоторые эксперименты с вашим содержанием:

Если я повторю пару изображений во второй раз, четвертое изображение каким-то образом составлено из двух (ниже слева). Никакая интерпретация вашего svg никогда не сможет создать такое изображение. Интересно, что я получаю точно такой же раскол, если вы используете разные свойства стилизации, например. непрозрачность (внизу справа):

Если я увеличиваю и уменьшаю масштаб с помощью cmd + + и cmd + -, перекрываются и частичные изображения.

Изменение размера страницы также имеет эффект.

Предполагая, что стиль изображений может каким-то образом взаимодействовать друг с другом, я попробовал иметь четыре разных копии изображения (icons1.svg#close, icons2.svg#error и т.д.) и ссылаться на них отдельно. Это в основном фиксировало проблему, но четвёртое изображение отсутствовало в нижних трех кварталах. Однако, как только я изменил размер окна, появилась пропавшая часть изображения.

Нижняя строка: неполный /buggy идентификатор фрагмента svg/обработка CSS.