简体繁体 English

Android浏览器中的SVG对象缩放

[英]SVG object scaling in Android Browser

原文 2014-04-17 08:56:17 4 2 android/ html/ css/ svg/ android-browser

I'm having this problem with a website we're building. 我正在建立的网站遇到这个问题。

http://swaegersverzekeringen.e-staging.be http://swaegersverzekeringen.e-staging.be

At the top left we have the company logo, which is an SVG image. 左上角有公司徽标，这是SVG图片。 (fyi : IE lte 9 a png gets loaded) （仅供参考：IE LTE 9 PNG被加载）

The SVG scales perfectly if I give the object tag holding the svg another width and height at different breakpoints. 如果我给持有svg的对象标签在不同的断点处设置另一个宽度和高度，则SVG可以完美缩放。 Now apparently, Android browser likes to do his own thing and doesn't scale the svg at all. 现在显然，Android浏览器喜欢做他自己的事情，根本不扩展svg。

I can see that the object tag IS given the proper width, but the svg is displaying at full size and gets cropped because the object container is 100px wide. 我可以看到对象标签的宽度正确，但是svg以全尺寸显示，并且由于对象容器的宽度为100px而被裁剪。

I've been googling about this for an hour now, so I decided to ask around here what might be the solution. 我已经搜索了一个小时，所以我决定在这里询问可能的解决方案。

Thanks in advance guys! 在此先感谢大家！

2 个解决方案

Is there any specific reason that you're using an object instead of an img tag? 您使用对象而不是img标签有任何特定的原因吗？ You could deliver IE9 a .png as well and use img for browsers that support it. 您也可以为IE9提供.png文件，并在支持它的浏览器中使用img 。

You have to add style="max-height: 100%" in the actual SVG file. 您必须在实际的SVG文件中添加style =“ max-height：100％”。 You can use the tag in your markup, but using tag is better. 您可以在标记中使用标记，但使用标记更好。