SVG在Android中保留纵横比

Question

我在Android手机上遇到SVG Scaling问题。

我网站的几个部分基于通过<img>标记嵌入SVG的宽度和高度尺寸。 除 Android 4.1.2原生浏览器（非CHROME）之外的所有浏览器都可以正确且完美地扩展SVG，而不会扭曲纵横比。

以下是它在Firefox（以及所有浏览器）上的显示方式的屏幕截图

以下是它在Android 4.1.2原生浏览器中的显示方式的屏幕截图。

测试网址 http://prashantsani.com/demos/svgIssue/

我尝试了以下所有解决方案，但都没有。

1. 设置宽度，高度和视图框不起作用。此外，preserveAspectRatio也不起作用。 <svg width="443.5" height="100" viewBox="0 0 443.5 100" preserveAspectRatio="xMidYMid meet">

2. 在另一个SVG中进行包装并没有做到这一点（另外，我不想让图像居中，而是需要一种方式来对比图像）。 Programmatically centering svg path

3. 我试过这个：SVG Resize Image out of aspect ratio但它也不起作用。宽度和高度已经以整数设置，而不是％或px。

请在回答之前阅读以下内容：

1. 由于布局要求在某些地方宽度和高度，我必须在某些地方保留两者。
2. 此问题仅发生在Android 4.1.2上的NATIVE BROWSER APP中{＆＃34;浏览器＆＃34;应用} 。它在Chrome和Android 4.1.2上的所有其他浏览器中的预期效果非常出色。
3. 如果找到解决方案，小提琴或编码器会很有帮助。
4. 不打算使用SVG以外的任何图像格式。
5. 宽度和高度，在％via css ....中提到，SVG必须相应缩放。

感谢。

Answer 1

根据This Article，样式属性中的max-height: 100%;和/或max-width: 100%似乎是潜在的修复。

但就我自己而言，我只用width="32"指定了viewBox="0 0 32 32"，一旦我添加height="32"我就不再有任何问题了。我太习惯了大多数补偿这些东西的浏览器。

Answer 2

question you provided在运行时遇到了一些麻烦，所以我使用标准的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 -->

如果您想直接在设备中运行它，我也会fiddle。