Размытие фонового изображения SVG в Chrome с повторяющимся фоном ⇐ CSS

[Гость]

Фон SVG выглядит размытым в Chrome и других браузерах на базе Blink/webkit:
Скриншот части SVG в Chrome:

Снимок экрана части SVG в Firefox:

Это происходит только при отображении SVG со значениями CSS «background-repeat: true» и «background-size: contains». Нам хотелось бы повторить высоту фона SVG столько раз, сколько необходимо, поскольку высота страницы является динамической и растягивание векторного изображения будет выглядеть неэффективно.
SVG отображается в строке CSS на примере страницы ниже, но проблема возникает таким же образом, когда я ссылаюсь на внешнее изображение SVG.
Вот тестовая страница, которая демонстрирует такое поведение:
https: //august-13-2020-test-canvas.bubbleapps.io/version-test/pagemaker-test-original-2
(войдите в систему, используя «имя пользователя» и «пароль», мы должны ввести это аутентификация здесь).
Тестовая страница с правильно отображаемым (четким/гладким) SVG находится здесь: https://august-13-2020-test-canvas.bubbleapps.io/ version-test/pagemaker-test-online-1
Версия с четкими/гладкими краями отображается точно так же — единственная разница — это содержимое SVG.
Вот ссылка на фоновый SVG для размытой страницы:
Все SVG, которые я тестировал на этой странице, имели четкие края: https://www.svgbackgrounds.com/#flat-mountains (правый нижний — тот, который использовался в ссылке выше)
Пытаясь исправить эту проблему или определить ее причину в коде SVG, я немного отредактировал SVG, попытавшись сделать следующее:

• < li>Преобразование всех точечных значений SVG (атрибуты d пути) в целые числа.
• Добавление «PreserveAspectRatio» в открывающий тег SVG.
• Удаление высоты и ширины. из вступительного объявления SVG.
• Удаление «линейных градиентов» из SVG и замена их статическими цветами.
• Удвоение размера SVG. фигур, чтобы увидеть, уменьшается ли размытость при увеличении начальной ширины и высоты.
• Добавление свойства «crispEdges» к путям SVG.
• Оптимизация SVG ( используя SVGomg)

Кроме того, я попытался немного изменить CSS, но не смог заставить его работать.
У меня есть следующие идеи обходных путей:

• Использование нескольких фоновых изображений для повторения отображения SVG (покажите его 5–10 раз). в фоновом режиме, имитируя эффект фонового повторения: повторения, но с включением нескольких фоновых изображений)
• Использование JS для отрисовки встроенного SVG на странице (где эта ошибка не возникает) ), создание HTML, высота которого точно равна динамической высоте нашей группы (которая может измениться в любой момент без запуска события JS) и каким-то образом повторяется SVG внутри этой группы.
• Спросить дизайнер для другого фона SVG и надеюсь, что проблема с размытием не повторится.

Любая помощь здесь будет очень признательна, я тяну отказался от этого и не смог решить проблему после консультации с несколькими разработчиками на CodeMentor.io.


Источник: https://stackoverflow.com/questions/635 ... background