SVG 在 Android 中保留纵横比

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

我网站的几个部分是基于通过嵌入的 SVG 的宽度和高度尺寸<img>标签。 所有浏览器，除了Android 4.1.2 原生浏览器（非 Chrome），正确、完美地缩放 SVG，不会扭曲纵横比。

Here is screenshot of how it appears on Firefox(and all the browsers)

Here is screenshot of how it appears on the Android 4.1.2 Native Browser.

测试网址 http://prashantsani.com/demos/svgIssue/ 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 路径 https://stackoverflow.com/questions/16891277/programmatically-centering-svg-path/16921836#16921836

3. 我试过这个：SVG 调整图像大小超出纵横比 https://stackoverflow.com/questions/18522361/svg-resize-image-out-of-aspect-ratio但它也不起作用。宽度和高度已设置为整数，而不是 % 或 px。

回答前请先阅读以下内容：

1. 由于布局在某些地方需要宽度和高度，因此我必须在某些地方保留两者。
2. 此问题仅发生在 Android 4.1.2{“浏览器”应用程序}上的本机浏览器应用程序中 。正如在 Chrome 和 Android 4.1.2 上的所有其他浏览器中所预期的那样，它运行得非常出色。
3. 如果您找到解决方案，小提琴或密码笔将会很有帮助。
4. 不打算使用 SVG 以外的任何图像格式。
5. 宽度和高度并通过 css 以 % 的形式提及......并且 SVG 必须相应地缩放。

Thanks.

As per 本文 http://codeandlife.com/2014/12/28/fixing-android-browser-svg-scaling-with-max-height/, max-height: 100%; and/or max-width: 100%样式属性内似乎有潜在的修复。

然而，就我自己而言，我只指定了width="32" with a viewBox="0 0 32 32"，一旦我添加height="32"我不再有任何问题。我太习惯了大多数可以弥补这些问题的浏览器。