在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

要在浏览器之间实现更一致的扩展，请务必确保指定viewBox，但不要在width元素上保留height和svg属性。我created a test page用于比较指定不同SVG属性的效果以及CSS中指定的宽度和高度。在几个不同的浏览器中将它们并排比较，你会发现处理方面存在很多差异。

Answer 2

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

Answer 3

你也可以看一下：https://gist.github.com/larrybotha/7881691 - 这是这个“故事”的延续。

---

修复<img>标签中的SVG，而不是在IE9，IE10，IE11中缩放

当指定img，viewBox和width属性时，IE9，IE10和IE11无法正确扩展添加了height标记的SVG文件。在不同的浏览器上查看this codepen。

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

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

根据this answer on 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文件。

以下内容将针对包含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%; 
  }
}

注意事项

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

Answer 4

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

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

我在IE中调整百分比大小的仅解决方案是在＆lt; object＆gt;中嵌入外部SVG。标签

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

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

Answer 5

不知怎的，这个scss解决了我的问题。

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

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

Answer 6

该问题的罕见情况可能是在webpack中使用image-webpack-loader。 加载程序可能正在删除某些svg的viewBox属性。您需要通过webpack.config.js禁用该选项

loader: 'image-webpack-loader',
    options: {
        svgo: {
            plugins: [{
                removeViewBox: false,
            }],
        },
    },