SVG в Chrome иногда не отображают - программирование

ТРЕТЬЕ ИЗМЕНЕНИЕ: здесь рабочий тестовый пример. Похоже, что это имеет какое-то отношение к кешированию svg spritesheet. Если я настрою управление кешем на своем сервере, чтобы не было кеширования SVG, это происходит. Не стесняйтесь просматривать исходный код (все в одном файле, но я не хочу включать все здесь).

SECOND EDIT: исправление, перечисленное ниже (прямое вложение элементов в index.html вместо использования внешнего спрайта) просто перестало работать в Chrome v49 (о котором только что обновил браузер бета-канала). v48 имеет проблему прерывистого рендеринга, но v49 довольно последовательно не отображает ничего, что указано в шаблоне <svg><use></use></svg>; но только на большой, сложной странице angular. Скучный простой тест работает нормально. Добавлена щедрость для всех, кто может прямо указать мне на известную проблему или где бы это ни происходило. Это, безусловно, не файл-не-найденный, так как он все еще является прерывистой ошибкой, и вся страница выглядит просто отлично в firefox и safari.

EDIT: это определенно связано со ссылкой на внешний ресурс. Когда я встраиваю SVG непосредственно в index.html и ссылаюсь на них с помощью <use xlink:href="#id"></use>, они работают нормально, но если я ссылаюсь на внешний файл в элементе <use>, они иногда загружаются.

У меня какое-то странное поведение в хроме (только - это не происходит в опере, firefox, safari); Я видел это с по крайней мере в начале 40-х, по версии.

Мое поведение находится в середине ng-повторной структуры angular. Все одно и то же - там куча divs flexboxed вместе. Также есть элемент SVG, который выглядит следующим образом:

Дело в том, что для некоторых из этих повторяющихся элементов значок не отображается. Проверка элемента в инструментах chrome dev означает, что отображаемый SVG <use> элемент имеет высоту и ширину, тогда как неоригинальный имеет нулевую высоту и ширину.

Здесь нет никакой реальной разницы; Я даже вручную отредактировал DOM, чтобы одна из оскорбительных записей полностью соответствовала одному из рендерингов, но svg все равно не отображает. Вот соответствующий скриншот.

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

Мне интересно: есть ли какая-то неясная проблема, связанная с использованием списков спрайтов (все SVG, которые демонстрируют это поведение, находятся в одном большом SVG файле и на которые ссылается #id) загружаются асинхронно или что-то в этом роде?

Если это действительно неизвестно/новое поведение, я буду работать над созданием тестового примера, но создание чего-то, что, вероятно, зависит от какой-то ошибки concurrency, отчасти тяжело. Поэтому я решил, что сначала спрошу.

РЕДАКТИРОВАТЬ, чтобы добавить: Такое поведение не происходит, если я экспортирую отдельный svg out как автономный и использую его в модуле <img src="icon.svg">. Он все еще терпит неудачу, если я использую svg для использования в значке в отдельном автономном файле.

EDIT: по запросу @kaiido, вот соответствующий вопрос svg.

Ответы

Ответ 1

Ну, оказывается, это хромовая ошибка в конце концов, и в значительной степени я думал, что это: изменение <use> элементов вокруг разрывов при определенных обстоятельствах. Эти обстоятельства в основном: когда svg spritesheet не кэшируется в браузере.

https://code.google.com/p/chromium/issues/detail?id=580809

Исправлено в канареечном канале (M50), которое можно объединить в M49.

Обходной путь - установить заголовок управления кешем в spritesheet SVG, который больше нуля. Это также помогает объяснить, почему я только видел эту ошибку на моем тестовом сервере, а не в производстве - у меня разные настройки кеша в бета-блоке.

Ответ 2

У меня тоже была эта ошибка. Был исправлен с помощью pfooti путем кеширования, а затем с помощью обновления webkit.

Но потом он вернулся: не то же самое, но может быть полезно для других, позже.

Я открыл SVG с помощью Inkscape (но то же самое работает и в Illustrator), выбрал мой объект и применил path > union и сохранил:

<path class="st0" d="M32 272l128 48 16 160 80-112 112 112L480 32 32 272zm318.7 145.4L256 320l128-176-192 153.8-82.6-31 322-172.5-80.7 323.1z"/>

стал

<path d="M480 32L32 272l128 48 16 160 80-112 112 112L480 32zm-48.6 62.3l-80.7 323.1L256 320l128-176-192 153.8-82.6-31 322-172.5z"/>

И теперь это работает!

Я не знаю точно, почему, но у Chrome, похоже, есть проблема с первым синтаксисом. Надеюсь, это поможет!

Ответ 3

Атрибут xlink:href устарел, поскольку SVG 2 (ссылка на доказательство). Новые версии Chrome работают с этим атрибутом.

Если вы используете xlink:href (для древних браузеров) и href (для новых браузеров) все будет хорошо работать везде.