相关疑难解决方法(0)

CSS:

img{
    max-height:30px;
}

HTML:

<img src="foo.svg" />

我正在寻找这个svg图像按比例缩放到30像素高的最大高度.svg的自然尺寸为200px×200px.适用于FF和Chrome(30x30),但在IE9中,图像为30x200.现在这里是踢球者.它只发生在某些SVG文件中,其他svgs正确缩放.

似乎差异是一个由多边形组成,另一个是由路径组成.

无法正确缩放:

http://www.radiantinteractive.com/rs/images/allies/other/crocs.svg

确实缩放:

http://www.radiantinteractive.com/rs/images/allies/technologyLogos/groovy.svg

关于为什么会发生这种情况的任何想法,或者我如何让第一个在ie9中按比例缩放？

我正在尝试在标签内部放置一个SVG图形,该<img />标签适合(没有裁剪)标签内保留的纵横比.我在Inkscape中创建了SVG.除了Internet Explorer 9之外,它在所有浏览器上都按预期工作.

为了使它在运行IE 9,我不得不添加viewBox="0 0 580 220"和preserveAspectRatio="xMidYMid meet"并删除width="580"和height="220" SVG属性.

<svg viewBox="0 0 580 220" preserveAspectRatio="xMidYMid meet">...</svg>

这似乎无处不在,直到我在Webkit上尝试它,<img />标签在垂直方向上被拉伸,尽管SVG的长宽比确实得到了保留.

当我放回width="580"和height="220"属性时,它适用于Webkit,但在IE 9上,aspectr比率丢失了.

是否有针对此行为的跨浏览器解决方案？

我决定为我的一个项目切换到svg符号 - 但需要它们才能响应.主要的想法是不要有多个http请求,所以我想将所有SVG合并到一个SVG中,定义符号并按如下方式使用它们:

<svg style="display:none;">
<defs>
<symbol id="mys">
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#3F77BC" d="M222.1,77.7h-10.3c0.1-0.8,0.2-1.4,0.2-2.3
        c0-8.5-6.9-15.4-15.4-15.4c-8.5,0-15.4,6.9-15.4,15.4c0,0.9,0.1,1.5,0.2,2.3h-9.3v4h-24.9v-5.2H89.4c0-0.3,0-0.6,0-0.9
        C89.4,67.1,82.5,60,74,60s-15.4,6.9-15.4,15.4c0,0.3,0,0.6,0,0.9h-6.2V60.7h4.3l5.3-5.3h22.8L74.3,44.9l-13.5-3.6l0.5-1.7
        l-16.5-4.4c-0.3,0.1-0.7,0.2-1,0.2l0,21.4h2v7.2c0,0-2,0.6-1.9,1.3c0.1,0.7,4.1,2.6,3.4,5.5c-0.6,2.9-1.6,4.8-4.4,4.5
        c-2.7-0.3-3.4-1.4-3.4-2.6c-0.1-1.2,0-3,0-3L38,67.9c0,0,2-0.5,2.6,1.1c0.6,1.5-0.2,2.7,0.6,3.5c0.8,0.8,4.1,1.4,4.1-1.1
        c0-2.5-0.5-2.4-2.1-3.6c-1.7-1.2-3.4-2.8-3.4-3.3c0-0.5-0.1-7.7-0.1-7.7h2.1l0-21.7c-1.4-0.7-2.5-2.1-2.5-3.8
        c0-2.3,1.9-4.2,4.2-4.2c2,0,3.6,1.4,4.1,3.2l15.3,4.1l0.4-1.6l55.8,15.1h28.1c0,0,0-23.5,0-26.2c0-2.7,2.1-2.6,2.1-2.6
        s32.5-0.5,35.1,0.5c2.7,1,3.3,3.7,3.3,3.7h-2l5,11.6c0,0,7.3,4.6,17.6,7.6c10.3,3,13.6,7.6,13.6,7.6l-1,17.6l1.3,2V77.7z
         M81.5,46.8l8.6,8.6h9.3l2.9-2.9L81.5,46.8z M175.5,25l-17.4-0.1v12.6h9.6l2.7,2.7h6.6L175.5,25z M183,23.7h-4c0,0,2,6.6,3,9.9
        s0.9,4.2,2.7,4.2c1.9,0,4.2,0,4.2,0L183,23.7z M74.2,63.8c6.8,0,12.3,5.5,12.3,12.3S81,88.4,74.2,88.4c-6.8,0-12.3-5.5-12.3-12.3
        S67.4,63.8,74.2,63.8z M196.6,63.8c6.8,0,12.3,5.5,12.3,12.3s-5.5,12.3-12.3,12.3s-12.3-5.5-12.3-12.3S189.8,63.8,196.6,63.8z"/>
</symbol>
</defs>
</svg>
<div style="position:relative;width:100%;background:blue;">
  <svg class="mys" viewBox="0 0 254 108" preserveAspectRatio="xMaxYMax meet" style="width:100%;">
    <use xlink:href="#mys"></use>
  <svg>
</div>

这是一个jsfiddle,检查IE中的不同行为(我检查了11但是读了9也有多个问题):http: //jsfiddle.net/ws472q71/

对于我的生活,我无法让它正常工作.上面的代码在Firefox和Chrome中正常运行,但在IE中失败.我读到了有关IE问题的内容,但我找不到任何可行的内容.

我究竟做错了什么？

是否有任何其他类似的解决方案可以将SVG合并到一个文件中并将它们用作响应式图像？

谢谢!

我在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中提到的宽度和高度必须相应地缩放.

谢谢.