不尊重

CSS：SVG在img元素的比例在IE9

img{ 
    max-height:30px; 
}

HTML：

<img src="foo.svg" />

我找的这个SVG图像比例缩放为30个像素高最大高度。 svg的自然尺寸是200px x 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？

来源

2012-03-19 Fresheyeball

您的图片已经消失。 – robertc 2012-03-20 17:43:07

有一些警告，这取决于您是否将IE设置为100％或100％。我已经整理了一个测试页面，部分是因为IE团队可以修复它，但也要了解在使用不同属性时会发生什么情况：http://codepen.io/larrybotha/full/hmlAs – Larry 2014-01-31 13:37:47

本文可能有所帮助： https：//开头的CSS技巧。com/scale-svg/ – 2016-04-15 16:19:45

105

为了获得跨浏览器更加一致的比例始终确保您指定的viewBox但留下了你的svg元素的width和height属性。我有created a test page，用于比较指定不同SVG属性与CSS中指定的宽度和高度的效果。在几个不同的浏览器中并排比较，你会发现处理有很多不同。

来源

2012-03-20 17:49:47 robertc

upvote for the testing page，that was badass of you。 – Fresheyeball 2012-03-21 18:18:25

现在的问题是，问题发生在“高度受限”。看看你的测试页面，ie9中没有选项匹配chrome。这是否意味着我需要单独服务ie9？ – Fresheyeball 2012-03-21 18:26:25

@Fresheyeball要么是这样，要么找到一种方法使它在宽度约束而不是高度上工作。也许值得研究[preserveAspectRatio]（https://developer.mozilla.org/en/SVG/Attribute/preserveAspectRatio）属性来查看是否明确地改善了情况。 – robertc 2012-03-21 18:33:41

在ie9中修复它，而不是卡住这个。我不知道为什么，但你应该设置宽度：通过CSS规则的100％，但不是在img标签。长宽比将通过魔术工作））它帮助了我，希望这篇文章能够帮助其他人。

来源

2013-11-07 15:12:08 Able

+1谢谢@Able！ – Fresheyeball 2013-11-07 17:05:49

也适用于IE11 – Sherbrow 2013-11-25 23:26:00

可笑的是，这不是在3个版本的IE中修复的。 – Larry 2013-12-09 14:58:16

我花了周尝试各种解决方案，以便能够在适用于大型现代浏览器的大小适应性网站中使用SVG。

SVG需要使用CSS百分比进行缩放并包含嵌入的位图图像。

的只的解决方案，我在IE浏览器中发现的百分比大小调整是嵌入外部SVG在一个<对象>标签。

有很多解决方案可以将IE中SVG的大小调整为严格的像素大小，但它们都不适用于百分比大小调整。

我已经创建了一个非详尽的测试套件here。

来源

2014-10-21 16:02:31

你能举一个例子吗？ – Fresheyeball 2014-10-21 22:23:12

我在我的答案中添加了一个简单测试套件的链接。 – 2014-10-22 08:44:40

你也可以看看这里：https://gist.github.com/larrybotha/7881691 - 这是这个“故事”的延续。在<img>标签

修复SVG在IE9，IE10，IE11

IE9，IE10，IE11和不结垢不正确缩放与img标签添加SVG文件时viewBox，指定width和height属性。在不同的浏览器上查看this codepen。

当图像位于比图像宽度窄的容器内时，图像高度不会缩放。这可以通过两种方式解决。

使用`sed`在bash去除宽度和SVG文件

按this answer on Stackoverflow height属性，这个问题可以通过只取出width和height属性来解决。

这个小脚本将递归搜索当前工作目录SVG文件，并删除了跨浏览器兼容的属性：

find ./ -name '*.svg' -print0 | xargs -0 sed -i "" -e 's/width="[0-9]*\.*\[0-9]*" //' -e 's/height="[0-9]*\.*\[0-9]*" //'

注意事项

删除width和height属性将迫使形象占据它的容器在非IE浏览器中的全宽度。

IE10（其他浏览器需要测试）会将图像缩小到任意大小 - 这意味着您需要将width: 100%添加到您的CSS以适合其容器。

目标IE的CSS

由于上述方案需要CSS不管怎么说，我们还不如用一个黑客获得IE浏览器的行为，而不用担心有管理每个单独的SVG文件。

以下将针对包含SVG文件的所有img标签在IE6 +（仅支持IE9 +支持SVG文件）。

/* 
* Let's target IE to respect aspect ratios and sizes for img tags containing SVG files 
* 
* [1] IE9 
* [2] IE10+ 
*/ 
/* 1 */ 
.ie9 img[src*=".svg"] { 
    width: 100%; 
} 
/* 2 */ 
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
    img[src*=".svg"] { 
    width: 100%; 
    } 
}

注意事项

这个目标包含“.SVG”在IE9，IE10，IE11和每img标签 - 如果你不想对具体图像的这种行为，你必须添加一个类重写该图像的这种行为。

来源

2015-03-22 13:31:58 Martenti

不知何故，这scss解决了我的问题。

ul { 
    li { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    display: inline; 
    img { 
     height: 20px; 
     margin: 0 10px; 
     display: inline-block; 
    } 
    } 
}

我实际上正在为我的页脚制作一个集中的徽标列表，并且存在宽度问题。通常我会在其中创建一个内嵌块的内联块。用inline-block元素创建一个内联元素为我工作。这是一个特定的实现，这个bug显示给我，并没有真正解决每一个bug，但希望它可以帮助读者阅读。

来源

2015-06-02 23:01:22

SVG在img元素的比例在IE9

回答

修复SVG在IE9，IE10，IE11

使用sed在bash去除宽度和SVG文件

注意事项

目标IE的CSS

注意事项

相关问题

使用`sed`在bash去除宽度和SVG文件