SVG在Android中保留纵横比

Question

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

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

这是它在Firefox(以及所有浏览器)上的显示方式的屏幕截图

以下是它在Android 4.1.2 Native Browser上的显示方式的屏幕截图.

测试网址 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. 此问题仅发生在Android 4.1.2 {"浏览器"应用程序}上的NATIVE BROWSER APP中.它在Chrome和Android 4.1.2上的所有其他浏览器中的预期效果非常出色.
3. 如果找到解决方案,小提琴或编码器会很有用.
4. 不打算使用除SVG之外的任何图像格式.
5. 通过css ....和SVG中提到的宽度和高度必须相应地缩放.

谢谢.

Answer 1

您提供的问题在运行时遇到了一些麻烦，因此我使用标准 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 -->

如果你想直接在你的设备中运行它，我也做了一个小提琴。