Соотношение SVG Preserve Aspect в Android

У меня проблемы с SVG Scaling на телефонах Android.

Пара частей моего веб-сайта основана на том, что размеры SVG и ширины для ширины и высоты встроены в <img> . Все браузеры, кроме Android 4.1.2 Native Browser (NOT CHROME), масштабируют SVG. Правильно и идеально, без искажения формата.

Вот скриншот о том, как он отображается в Firefox (и обо всех браузерах) Введите описание изображения здесь

Вот скриншот о том, как он отображается в Android 4.1.2 Native Browser. Введите описание изображения здесь

Тестирование URL http://prashantsani.com/demos/svgIssue/

Я пробовал все нижеперечисленные решения, но никто из них не работал.

  1. Установка ширины, высоты и окна просмотра не работает. Кроме того, preserveAspectRatio тоже не работает. <svg width="443.5" height="100" viewBox="0 0 443.5 100" preserveAspectRatio="xMidYMid meet">

  2. Обертка внутри другого SVG не делала трюка (также, я не хочу центрировать изображение, скорее нужно проложить масштаб изображения). Программно центрирующий SVG-путь

  3. Я пробовал это: SVG Изменить размер изображения из соотношения сторон, но он тоже не работает. Ширина и высота уже заданы целыми числами, а не% или px.

Пожалуйста, прочитайте следующее перед ответом:

  1. Поскольку в некоторых местах макет требует как ширины, так и высоты, я должен держать оба в некоторых местах.
  2. Эта проблема ТОЛЬКО происходит в приложении NATIVE BROWSER APP на Android 4.1.2 {Приложение «Браузер»}. Он работает блестяще, как и ожидалось в Chrome и всех других браузерах на Android 4.1.2.
  3. Если вы найдете решение, вам понадобится скрипка или codepen.
  4. Не планируете использовать любой формат изображения, отличный от SVG.
  5. Ширина и высота и указаны в% через css …. и SVG должен масштабироваться соответствующим образом.

Благодарю.

Согласно этой статье max-height: 100%; И / или max-width: 100% в атрибуте стиля кажутся потенциальными исправлениями.

Однако в моем собственном случае я только указал width="32" с viewBox="0 0 32 32" , как только я добавил height="32" меня больше не было проблем. Я слишком привык к большинству браузеров, которые компенсируют такие вещи.

У вас возникли проблемы при запуске, поэтому я модифицировал стандартные атрибуты html и работал. Протестировано на планшете Inco Sphere.

 <image width="100%" height="100%" src="http://upload.wikimedia.org/wikipedia/commons/e/e5/Tux_chico.svg" preserveAspectRatio="xMidYMid meet"> <image width="100" height="100" src="http://upload.wikimedia.org/wikipedia/commons/e/e5/Tux_chico.svg" preserveAspectRatio="xMidYMid meet" /> <!-- Image By Gonzalo Rivero (Own work) [GFDL (http://www.gnu.org/copyleft/fdl.html) or CC BY-SA 3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons -->