在ie9中不符合img元素比例的SVG

Question

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中按比例缩放？

Answer 1

要在浏览器之间获得更一致的扩展,请始终确保指定a,viewBox但不要在元素上使用width和height属性svg.我已经创建了一个测试页面,用于比较指定不同SVG属性的效果以及CSS中指定的宽度和高度.在几个不同的浏览器中并排比较它,你会发现在处理方面存在很多差异.

Answer 2

要在ie9中修复它而不是坚持这个.我不知道为什么,但你应该通过css-rule设置宽度:100%,而不是img-tag.宽高比将通过魔术工作))它帮助了我,希望这篇文章能帮助其他人.

Answer 3

你也可以看看这里:https://gist.github.com/larrybotha/7881691 - 这是这个"故事"的延续.

将SVG修复为<img>不在IE9,IE10,IE11中缩放的标签

IE9,IE10,IE11和不正确缩放与加入SVG文件img标记时viewBox,width和height属性来指定.在不同的浏览器上查看此codepen.

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

sed在bash中使用以删除SVG文件中的宽度和高度属性

根据Stackoverflow上的这个答案,可以通过仅删除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以使这些图像适合其容器.

使用CSS定位IE

由于上述解决方案无论如何都需要CSS,我们不妨使用hack来使IE运行,而不必担心必须管理每个单独的SVG文件.

以下将针对img包含SVG文件的所有标记,在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%; 
  }
}

注意事项

这针对imgIE9,IE10和IE11中包含".svg"的每个标记 - 如果您不希望在特定图像上出现此行为,则必须添加一个类来覆盖该图像的此行为.