Android中的SVG保留长宽比 [英] SVG Preserve Aspect Ratio in Android

问题描述

我的网站几部分内容都是基于通过<$嵌入SVG的宽度和高度尺寸c $ c>< img> 标记。
除了 Android 4.1.2 Native Browser （不CHROME）之外的所有浏览器，均可正确完美地缩放SVG，而不会扭曲纵横比。

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

以下是它在Android 4.1.2 Native Browser上的显示效果。
< img src =https://i.stack.imgur.com/2jJ8R.pngalt =在这里输入图片描述>

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

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

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




2. 包装在另一个SVG中并没有做到这一点（另外，我不想让图像居中，而是需要一种方式来比例调整图像）。
   以程序为中心的svg路径




3. 我试过这个： SVG调整图像大小纵横比，但它也不起作用。宽度和高度已经设置为整数，而不是％或px。 $ b

   
   
   1. 由于布局在某些地方需要宽度和高度，因此我必须在某些地方保留这两个地方。 这个问题只发生在NATIVE Android 4.1.2上的BROWSER APP {浏览器应用程序}
      。它在Chrome和Android 4.1.2上所有其他浏览器中的预期效果非常出色。
   
   
   2. 如果您找到解决方案，小提琴或codepen将会很有帮助。
   
   
   3. 不打算使用除SVG以外的任何图像格式。
   
   
   4. 宽度和高度，并在％via CSS中提及......并且SVG必须相应地缩放。 strong>
   
   

   谢谢。 p>按照本文

   在样式属性中使用a>， max-height：100％; 和/或 max-width：100％在我自己的情况下，我只是指定了 width =32 viewBox =0 0 32 32，一旦我加入 height =32我不再有任何问题。我太习惯于大多数补偿这些事情的浏览器。
   

   I am having issues of SVG Scaling on Android Phones.

   Couple of parts of my website are based on having both width and height dimensions for SVGs embeded via <img> tag. All the browsers except Android 4.1.2 Native Browser(NOT CHROME),scale SVGs Properly and perfectly without distorting Aspect Ratio.

   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.

   Testing URL http://prashantsani.com/demos/svgIssue/

   I tried all below solutions but none of them worked.

   1. Setting width, height and view-box does not work. Also, preserveAspectRatio does not work either. <svg width="443.5" height="100" viewBox="0 0 443.5 100" preserveAspectRatio="xMidYMid meet">

   2. Wrapping up inside another SVG did not do the trick (Also, i don't want to center the image, rather need a way scale the image propotionately). Programmatically centering svg path

   3. I Tried this : SVG Resize Image out of aspect ratio but it does not work either. The width and height is already set in integers and not % or px.

   Please read following before Answering:

   1. Since the layout demands both width and height at some places, I have to keep both at some places.
   2. This issue ONLY happens in NATIVE BROWSER APP on Android 4.1.2{"Browser" App} . It works brilliantly, as expected in Chrome and all other browsers on Android 4.1.2.
   3. A fiddle or codepen will be helpful if you find a solution.
   4. Not planning to use any image format other than SVG.
   5. Width and height and mentioned in % via css....and SVG has to scale accordingly.

   Thanks.

   解决方案

   As per This Article, max-height: 100%; and/or max-width: 100% within a style attribute seem to be potential fixes.

   In my own case however, I had only specified width="32" with a viewBox="0 0 32 32", once I added height="32" I no longer had any issues. I was too used to the majority of browsers that compensate for such things.

   这篇关于Android中的SVG保留长宽比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！