SVG在Android中保留纵横比

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

我的网站的几个部分基于通过标签嵌入SVG的宽度和高度尺寸。 除了Android 4.1.2原生浏览器 (非CHROME)之外的所有浏览 ,在不扭曲宽高比的情况下正确且完美地扩展SVG。

这是它在Firefox(和所有浏览器)上的显示方式的屏幕截图 在此处输入图像描述

以下是它在Android 4.1.2 Native Browser上的显示方式的屏幕截图。 在此处输入图像描述

测试url http://prashantsani.com/demos/svgIssue/

我尝试了以下所有解决方案,但没有一个有效。

  1. 设置宽度,高度和视图框不起作用。 此外,preserveAspectRatio也不起作用。

  2. 在另一个SVG中进行包装并没有做到这一点(另外,我不想让图像居中,而是需要一种方式来对比图像)。 以编程方式居中svg路径

  3. 我试过这个: SVG调整图像宽高比,但它也不起作用。 宽度和高度已经以整数设置,而不是%或px。

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

  1. 由于布局要求在某些地方宽度和高度,我必须在某些地方保持两者。
  2. 此问题仅发生在Android 4.1.2 {“浏览器”应用程序}上的NATIVE BROWSER APP中。 它非常出色,正如Chrome和Android 4.1.2上的所有其他浏览器所预期的那样。
  3. 如果find解决方案,小提琴或编码器会很有用。
  4. 不打算使用除SVG之外的任何图像格式。
  5. 通过css ….和SVG中提到的宽度和高度必须相应地缩放。

谢谢。

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

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

您提供的问题在运行时遇到了一些麻烦,因此我使用标准的html属性进行了修改并且工作正常。 在Inco Sphere平板电脑上测试。