在 ie9 中不遵守 img 元素比例中的 SVG

Posted 2023-02-21

【中文标题】在 ie9 中不遵守 img 元素比例中的 SVG

【英文标题】：SVG in img element proportions not respected in ie9

【发布时间】：2012-04-04 08:23:57

【问题描述】：

CSS：

img
    max-height:30px;

html：

<img src="foo.svg" />

我正在寻找这个 svg 图像以按比例缩放到 30 像素高的最大高度。 svg 的自然尺寸为 200 像素 x 200 像素。在 FF 和 Chrome (30x30) 中效果很好，但在 IE9 中图像为 30x200。现在这是踢球者。它只发生在某些 SVG 文件中，其他 svg 可以正确缩放。

似乎不同的是，一个是由多边形组成的，另一个是由路径组成的。

无法正确缩放：

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

是否正确缩放：

知道为什么会发生这种情况，或者我如何让第一个在 ie9 中按比例缩放？

【问题讨论】：

你的图片消失了。

根据您是否将 IE 的 img 设置为 100%，有很多注意事项。我整理了一个测试页面，部分是为了让 IE 团队修复它，同时也为了了解使用不同属性时会发生什么：codepen.io/larrybotha/full/hmlAs

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

【参考方案1】：

要在浏览器中获得更一致的缩放，请始终确保指定 viewBox，但不要在 svg 元素上使用 width 和 height 属性。我已经created a test page 比较了指定不同 SVG 属性与 CSS 中指定的宽度和高度相结合的效果。在几个不同的浏览器中并排比较，你会发现处理上有很多不同。

【讨论】：

现在的问题是，“高度受限”会出现问题。查看您的测试页面，ie9 中没有任何选项与 chrome 匹配。这是否意味着我需要为 ie9 提供单独的 svg？

@Fresheyeball 要么就是这样，要么找到一种方法让它在限制宽度而不是高度的情况下工作。可能还值得研究 preserveAspectRatio 属性，看看是否明确设置它可以改善这种情况。

是的，目前我正在指定：高度、宽度、veiwbox 和 preserveAspectRatio。而且我同时限制了高度和宽度，但在图像仅受高度限制的情况下，它会扭曲。从您的示例中，如果我删除高度和宽度规范，ie9 会运行，但 chrome 不会。

这里还有一些有用的提示：blogs.msdn.com/b/ie/archive/2011/10/27/…

您可以使用$ find ./ -name '*.svg' -print0 | xargs -0 sed -i "" -e 's/width="[0-9]*"//' -e 's/height="[0-9]*"//'递归删除当前文件夹中Mac上所有svg的宽度和高度属性（删除-i之后的空"" for linux）

【参考方案2】：

在 ie9 中修复它而不是坚持这个。我不知道为什么，但是您应该通过 css-rule 设置 width:100%，而不是在 img-tag 中设置。长宽比会变魔术））它帮助了我，希望这篇文章能帮助其他人。

【讨论】：

可笑的是，这在 3 个版本的 IE 中都没有修复。

您可以添加以下内容以仅针对 IE9、IE10、IE11 中的 SVG：img[src*=svg] width/*\**/: 100%\9;

这解决了我在 IE11 上遇到的一个烦人的问题。谢谢。

【参考方案3】：

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

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

我在 IE 中发现的唯一解决方案是将外部 SVG 嵌入到

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

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

【讨论】：

你能举个例子吗？

我在答案中添加了一个简单测试套件的链接。

【参考方案4】：

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

---

修复 <img> 标签中的 SVG 在 IE9、IE10、IE11 中无法缩放

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

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

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

根据this answer on ***，仅删除width 和height 属性即可解决此问题。

这个小脚本会递归地在你当前的工作目录中搜索 SVG 文件，并删除属性以实现跨浏览器兼容性：

find ./ -name '*.svg' -print0 | xargs -0 sed -i "" -e 's/ //' -e 's/ //'

注意事项

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

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

使用 CSS 定位 IE

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

以下内容将针对 IE6+ 中包含 SVG 文件的所有 img 标签（不过，只有 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 标记 - 如果您不希望在特定图像上出现这种行为，则必须添加一个类来覆盖该图像的这种行为。

【参考方案5】：

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

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

我实际上是在为我的页脚制作一个居中的徽标列表，并且遇到了宽度问题。通常我会创建一个内联块，其中包含一个块元素。用 inline-block 元素创建一个 inline 元素对我有用。这是该错误向我显示的特定实现，并不能真正解决每个错误，但希望它可以帮助阅读本文的人。

【参考方案6】：

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

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