Область просмотра SVG не привязана к веб-киту ⇐ CSS

[Anonymous]

Я пытаюсь получить дизайн с SVG, правильно растягивающийся на всех экранах.
Дизайнер сделал рамки с эффектами в углах и на границах.
Для этого Работая, я сохранил кадры целиком в SVG, сделал сетку в CSS (Tailwind) и затем с помощью параметров viewbox в URL указал, какую часть SVG я хочу видеть. Например, верхний левый угол:
(viewBox(0,0,229,234))
Визуальное представление представлено ниже. Вы видите углы и границы в сетке 3x3.


Это отлично работает в браузерах Chromium; но в Safari все портится. С углами все в порядке, я думаю, потому что мы указываем фиксированную высоту/высоту и никакого растяжения не происходит.
Но границы портятся:


Однако, если я открою источник изображения непосредственно в браузере Webkit (с параметром viewBox), изображение кажется, обрезано правильно.
Я также пытался создать отдельный файл для границы с полем просмотра, указанным внутри, а не через URL-адрес, и это дает тот же результат, поэтому я считаю, что проблема не в с тем фактом, что мы указываем viewBox через URL-адрес.
Жду любых предложений или альтернативных реализаций, которые по-прежнему позволят мне использовать векторизованные/масштабируемые изображения.
Для полной справки, это текущая сетка, как показано на скриншот:
--corner-height: 234;
--border-width: 26;
--border-height: 26;
--scale-base: 0.5;
--scale-sm: 0.8;
--scale-md: 0.8;
--scale-xl: 1;
grid-template-columns: auto 1fr auto;
grid-template-rows: auto 1fr auto;
z-index: 1">




















Подробнее здесь: https://stackoverflow.com/questions/793 ... -in-webkit