Я недавно работал с некоторыми SVG и заметил, что в Safari области с заливками шаблонов выглядели очень размытыми.
Я пытался определить, была ли это проблема с кодом, но в процессе японял, что увеличение части SVG с помощью сенсорной панели Mac (НЕ увеличение текста из View-> Zoom), а затем обновление страницы сделало бы SVG-шаблоны четкими и чистыми - по крайней мере, для элементов SVG верхнего уровня физическиблизко к той части экрана, которая была видимой (более удаленные элементы SVG, которые не закрывали часть экрана, увеличенную при просмотре, не стали не размытыми).
Изображение перед обновлением страницы: 
Изображение после обновления страницы: 
Добавление к путанице заключалось в том, что рендеринг шрифта также изменился, при этом расстояние между глифами уменьшилось при обновлении.
Я пошел и проверил это в других браузерах.В Firefox было невозможно увеличить SVG так же, как в Safari.Что касается Chrome, который поддерживает то же самое региональное увеличение macOS, SVG-шаблон заполняется визуально четким и чистым с самого начала (как я изначально хотел).
Я также пробовал это в Mobile Safari, но здесь освежаюне решили проблему, и размытие сделало рисунок заливкой совершенно неразборчивым.У Mobile Opera Mini та же проблема, что и у Mobile Safari, но не до такой степени, что все неразборчиво.
Итак, мой вопрос: почему Desktop Safari ведет себя таким странным образом, и каковы обходные пути?К счастью, использование Safari составляет всего около 5%, и это не влияет на функциональность в целом, но требует, чтобы конечный пользователь обновил страницу, чтобы увидеть шаблоны SVG, которые отображаются четкими, а не размытыми, кажется ненужными.
Какобщее примечание, мой svg использует preserveAspectRatio="xMinYMin meet".В моих шаблонах используется width="100%" height="100%" patternUnits="objectBoundingBox", а содержимое всегда масштабируется (обычно на transform='scale(1 1), хотя здесь это не проблема).
Обратите внимание, что проблема рендеринга шрифтов и заливки рисунков в Mobile Safari может быть воспроизведена в Desktop Safari путем уменьшения ширины окна, что заставляет меня догадываться, что проблема связана с width="100%" height="100%" patternUnits="objectBoundingBox" в моих определениях шаблонов., но я не могу это подтвердить.
Спасибо.