изображение в теге изображения SVG отображается в браузере Desktop, а не в iphone

Question

У меня есть сайт, запущенный и работающий, вот проблема, которую я наблюдаю, вы можете посмотреть на нее: https://www.roadmapedia.com/roadmap/5c849cbd78487700173a172a

В синей части экрана с древовидной картой, изображения отображаются отличнопри условии, что вы находитесь на рабочем столе.

Однако на моем iphone6 ​​это выглядит так:

Таким образом, изображения SVG не отображаются.Вот изображения SVG в коде:

<image xlink:href="/static/media/circle.ffe52f1d.png" height="60" transform="translate(-30,-30)"></image>

Тег изображения обернут внутри тега SVG.На самом деле, в конце концов, я показываю png внутри тега изображения SVG.

Есть вопрос с таким же названием, как у меня на SO, но он задает что-то другое.

Answer 1

Вы можете заметить, что ваше изображение также отображается неправильно в Safari. Особенно если речь идет о преобразованиях и особых случаях, не все средства визуализации SVG следуют стандартному поведению SVG.

В Safari мне удалось решить вашу проблему, добавив width="60" как к PNG, который вы упоминаете в своем вопросе, так и к SVG YouTube, который также присутствует на изображении. YouTube SVG также не работает на мобильных устройствах и в Safari.

По словам веб-инспектора Safari, причина, по которой изображения не отображаются, заключается в том, что ширина вычисляется как "1px".

Итак, в итоге, добавьте width атрибутов. Попробуйте изменить тег PNG image на этот

<image xlink:href="/static/media/circle.ffe52f1d.png" width="60" height="60" transform="translate(-30,-30)"></image>

и тег SVG image для этого.

<image xlink:href="/static/media/youtube.45edfe4d.svg" width="60" height="60" transform="translate(-30,-30)"></image>

и проблема должна быть решена, хотя у меня нет возможности проверить это на мобильном устройстве без чрезмерного объема работы.

приписка

PNG, который вы используете на изображении, чрезвычайно прост. Кажется, это просто круг с линейным градиентом цвета. Я настоятельно рекомендую векторизовать его вместо использования растрового изображения в вашем SVG. Это был бы очень простой файл SVG для создания.