Почему scale в safari смещает изображение не как нужно?

Question

[vahromeevilya-widestudio]

Есть вот такой codepen https://codepen.io/vahromeevilya-widestudio/pen/poOBVQR

В chrome работает все отлично , в сафари почему то scale изображение смещает его за пределы бокса.

Chrome:



Safari:



Как сделать , чтобы в сафари работало корректно?
Версии браузеров:
Chrome: 111.0.5563.110
Safari: 15.5 (17613.2.7.1.8)

Comments

[Максим]

у вас и в chrome не работает
и для чего целый svg пихать в data и ещё потом в foreignObject ?
И если весь дизайнерский бред или бред верстальщика убрать то работает

<svg  viewBox="0 0 691 613" xmlns="http://www.w3.org/2000/svg">

			<rect rx="22" x="345.001" y="180" width="178" height="178" transform="rotate(45 345.001 180)"
				fill="#0B5EFF" />
<svg xmlns="http://www.w3.org/2000/svg" width="121" height="122" viewBox="0 0 121 122" fill="none" x="283" y="245">
<path fill-rule="evenodd" clip-rule="evenodd" d="M111.962 51.5205L60.4411 0L8.92056 51.5205H111.962ZM120.167 72.0333H70.8167L70.8167 121.383L120.167 72.0333ZM50.2065 121.336L50.2065 72.0333H0.904297L50.2065 121.336Z" fill="white"/>
</svg>
</svg>

этот логотип отрисовать без всяких транслейтов и без всяких дата и форигнобжектов 5 минут руками

[vahromeevilya-widestudio]

Максим, Это лишь часть объекта, остальное я вырезал, в целях экономии времени. Почему я поместил в foreignObject , потому что стояла задача сделать возможным менять картинку и текст через админку.



Вот так выглядит полный объект. В нем под замену должны попадать картинки и текст.

[Максим]

vahromeevilya-widestudio, ну это не имеет значение так как всё равно можно вставить svg внутрь svg или как use или ещё много способов .. можно вставлять через js и в общем ... способы есть

[vahromeevilya-widestudio]

Максим, я поправил свой codepen , добавил туда одну из ячеек, где под замену картинка и текст. Допустим svg можно через use вставить, но каким образом мне сделать под замену текст, и так чтобы все легко позиционировалось? Я откапал foreignObject , только потому что он четко решает поставленную задачу, относительное позиционирование внутри svg с привычным мне display grid.

Можете привести пример codepen как это бы сделали вы?

[Максим]

vahromeevilya-widestudio, мне же рисовать надо эти ячейки...конечно я не буду это делать...

[vahromeevilya-widestudio]

Максим, Так я имел ввиду только те тестовые 2 ячейки которые я уже предоставил на codepen , остальные я бы по аналогии переделал. Сами ячейки уже предоставлены вопрос только во внутреннем содержимом

[Максим]

vahromeevilya-widestudio, текст можно обычным тегом text либо форигнобьект, там без гемороя перенос строк работает

[Максим]

vahromeevilya-widestudio, но я вижу так, от svg только иконки, а вот текст и расположение блоков на обычном html css ... абсолютно всё пихать в svg нету смысла

Answer 1

[nkochnevss]

ты обнулял браузеры?
https://medium.com/@stasonmars/%D1%81%D0%BE%D0%B2%...

Comments

[vahromeevilya-widestudio]

Нет, не обнулял, но данный баг тестировался не на одном компьютере