ТРЕТЬЕ ИЗМЕНЕНИЕ: здесь рабочий тестовый пример. Похоже, что это имеет какое-то отношение к кешированию svg spritesheet. Если я настрою управление кешем на своем сервере, чтобы не было кеширования SVG, это происходит. Не стесняйтесь просматривать исходный код (все в одном файле, но я не хочу включать все здесь).
https://stuff.spherical.fish/svgtest.html
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, который выглядит следующим образом:
<svg class="icon-3">
<use xlink:href="/assets/trellis-icons.svg#icon-users"></use>
</svg>
довольно просто.
Дело в том, что для некоторых из этих повторяющихся элементов значок не отображается. Проверка элемента в инструментах chrome dev означает, что отображаемый SVG <use> элемент имеет высоту и ширину, тогда как неоригинальный имеет нулевую высоту и ширину.
Здесь нет никакой реальной разницы; Я даже вручную отредактировал DOM, чтобы одна из оскорбительных записей полностью соответствовала одному из рендерингов, но svg все равно не отображает. Вот соответствующий скриншот.
Вы можете видеть ниже (и игнорировать мои проблемы с добавлением кнопки), в первой строке нет маленьких головок и значков словосочетания. Это периодическая проблема - если я перезагружаю страницу, это может быть хорошо, или, возможно, ни одна из иконки не загрузится.
Мне интересно: есть ли какая-то неясная проблема, связанная с использованием списков спрайтов (все SVG, которые демонстрируют это поведение, находятся в одном большом SVG файле и на которые ссылается #id) загружаются асинхронно или что-то в этом роде?
Если это действительно неизвестно/новое поведение, я буду работать над созданием тестового примера, но создание чего-то, что, вероятно, зависит от какой-то ошибки concurrency, отчасти тяжело. Поэтому я решил, что сначала спрошу.
РЕДАКТИРОВАТЬ, чтобы добавить: Такое поведение не происходит, если я экспортирую отдельный svg out как автономный и использую его в модуле <img src="icon.svg">. Он все еще терпит неудачу, если я использую svg для использования в значке в отдельном автономном файле.
EDIT: по запросу @kaiido, вот соответствующий вопрос svg.
<svg xmlns="http://www.w3.org/2000/svg">
<!-- thirty other symbols snipped -->
<symbol id="icon-users" viewBox="0 0 512 512">
<path d="m352 397c-15-16-78-32-109-48c-21-11-32-33-32-53c0-10 7-19 13-26c5-6 9-14 13-24c8-4 18-12 18-31c0-12-2-19-5-24c1-11 2-22 3-34c4-45-42-90-89-90c-47 0-92 45-88 90c1 12 2 23 3 34c-4 5-5 12-5 24c0 19 9 27 18 31c4 10 8 18 13 24c6 7 13 16 13 26c0 20-11 42-32 53c-18 9-48 19-72 28l0 68l354 0c0 0 0-32-16-48z m146-7c-21-8-46-16-62-24c-17-8-25-27-25-43c0-8 5-15 10-21c4-5 8-12 11-20c7-3 15-10 15-25c0-10-2-16-5-20c1-9 2-18 3-27c3-37-34-76-73-76c-38 0-75 39-72 76c1 9 2 18 3 27c-3 4-5 10-5 20c0 16 8 22 15 25c3 8 7 15 11 20c4 6 10 13 10 21c0 10-4 22-11 31c30 11 43 22 53 33c19 19 19 58 19 58l103 0z"/>
</symbol>
</svg>
