在IE9中，img元素中的SVG比例不受尊重

Question

CSS：

img{
    max-height:30px;
}

HTML：

<img src="foo.svg" />

我希望这个 svg 图像可以按比例缩放到最大高度为 30 像素。SVG 的自然尺寸为 200px x 200px。在 FF 和 Chrome（30x30）中效果很好，但在 IE9 中，图像会变为 30x200。现在问题来了，只有某些 SVG 文件会出现这种情况，其他的 SVG 缩放都是正确的。

看起来问题在于一个是由多边形构成，另一个是由路径构成。

不正确的缩放：

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

正确缩放的：

对此有何想法，或者如何让第一个图像在 ie9 中等比例缩放？

- Fresheyeball

---

你的图片已经消失了。 - robertc

根据你是否将img设置为100％的IE，存在许多警告。 我已经准备了一个测试页面，部分原因是让IE团队修复它，但也是为了了解在使用不同属性时会发生什么：http://codepen.io/larrybotha/full/hmlAs - Larry

这篇文章可能会有所帮助：https://css-tricks.com/scale-svg/ - Paul D. Waite

Answer 1

为了在不同浏览器上实现更一致的缩放，始终确保指定viewBox，但在svg元素上省略width和height属性。我创建了一个测试页面来比较在CSS中指定宽度和高度的情况下，指定不同SVG属性的效果。在几个不同的浏览器中进行侧-by-side比较，您将看到处理方式存在很多差异。

- robertc

---

是的，目前我正在指定：高度、宽度、视口和preserveAspectRatio。我正在限制高度和宽度，但在图像仅受高度限制的情况下，它会变形。从你的例子中，如果我删除高度和宽度规格，ie9将会表现正常，但chrome不会。 - Fresheyeball

这是另一组有用的提示：http://blogs.msdn.com/b/ie/archive/2011/10/27/best-practices-for-getting-started-with-svg.aspx - oberstet

您可以使用 $ find ./ -name '*.svg' -print0 | xargs -0 sed -i "" -e 's/width="[0-9]*"//' -e 's/height="[0-9]*"//' 在 Mac 上递归地删除所有 SVG 文件中的宽度和高度属性（在 Linux 上去掉 -i 后面的空白引号）在当前文件夹中。 - Larry

我也遇到过同样的问题。于是我们用编辑器打开了SVG文件。 我们还发现，Illustrator在<svg>标签中生成的SVG文件没有宽度、高度属性。你可以在此处重新创建你的SVG文件（链接：http://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.html）。 - stephanfriedrich

@jay-taylor，在我的情况下，链接正常工作，我可以使用这些Google的SVG编辑器。但是我也遇到了一些网络错误。 - stephanfriedrich

Answer 2

为了在ie9中解决这个问题并且不受其困扰。我不知道为什么，但你应该通过css规则设置width:100%，而不是在img标签中设置。纵横比将会像魔术一样工作)) 这对我很有帮助，希望这篇文章也能帮到其他人。

- Able

---

令人荒谬的是，在3个版本的IE中这个问题仍未得到解决。 - Larry

你可以添加以下内容，只针对IE9、IE10和IE11中的SVG：img[src*=svg] { width/*\**/: 100%\9;} - Larry

这个修复了我在IE11上遇到的一个非常烦人的问题。谢谢。 - user339827

Answer 3

您还可以在这里查看：https://gist.github.com/larrybotha/7881691 - 这是这个“故事”的续篇。

---

修复IE9、IE10、IE11中<img>标签中的SVG文件不按比例缩放的问题

当指定了viewBox、width和height属性时，IE9、IE10和IE11不会正确缩放使用img标签添加的SVG文件。在不同的浏览器上查看此codepen。

当图像高度大于容器宽度时，图像高度不会缩放。这可以通过两种方法解决。

使用bash中的sed删除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]*" //'

注意事项

删除宽度和高度属性会强制图像在非IE浏览器中占用其容器的整个宽度。

IE10（其他浏览器需要测试）将缩小图像至某些任意大小-这意味着您需要为那些图像添加width: 100%以适应其容器。

使用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标签进行处理 - 如果您不希望对特定的图像进行处理，则需要为该图像添加一个类来覆盖这个行为。

- Martenti

Answer 4

我已经花费了数周的时间尝试各种解决方案，以便在适用于主流现代浏览器的可调整大小的网站中使用SVG。这些SVG需要使用CSS百分比进行缩放，并包含嵌入式位图图像。

在IE中，唯一的百分比大小调整解决方案是将外部SVG嵌入到标记中。

有各种解决方案可用于将SVG调整为严格的像素大小，但没有一个适用于百分比调整。

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

- Andy Swift

---

你能举个例子来演示吗？ - Fresheyeball

我在我的回答中添加了一个简单测试套件的链接。 - Andy Swift

Answer 5

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

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

我实际上是在制作页脚的居中标志列表时遇到了宽度问题。通常我会创建一个内联块（inline-block），其中包含一个块级元素。但这次使用内联元素与内联块元素组合对我有用。这是一个特定的实现方式，该错误只针对我出现，并不能解决所有错误，但希望能帮助阅读此内容的某些人。

- Buttars

Answer 6

对于这个问题，可能是在webpack中使用了image-webpack-loader的罕见情况。

该加载器可能会删除一些SVG文件的viewBox属性。您需要通过webpack.config.js禁用该选项。

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

- Jason Vasilev