SVG 图像在 IE11 中严重缩放答案

【问题标题】：SVG image badly scaled in IE11SVG 图像在 IE11 中严重缩放
【发布时间】：2017-02-18 15:24:30
【问题描述】：

我有一个不会在 IE11 中保持纵横比的外部 SVG 图像。

.container {
  width: 400px;
  height: 400px;
  display: block;
  border: 1px solid blue;
}
img {
  max-height: 200px;
  border: 1px solid red;
}

<div class="container">
  <img src="http://www.wikipathways.org/wpi/wpi.php?action=downloadFile&type=svg&pwTitle=Pathway:WP3155_r80720" />
</div>

问题是在 IE11 中宽度没有缩放以匹配最大高度。这在 IE11 中不起作用的原因是 SVG 图像没有定义视图框。

感谢任何解决方案！

【问题讨论】：

“这在 IE11 中不起作用的原因是 SVG 图像没有定义视图框。”解决方法：添加viewBox?
SVG 图像来自外部网站，因此无法更改。我曾尝试用 JS 加载它，然后添加一个视图框，但我的尝试失败了。
图片在 IE 11.187.14393.0 中右缩放
IE什么时候会消失？
您不应该负责修复其他服务的错误。如果服务返回损坏的 SVG，他们必须修复它。否则，您仍然可以在两者之间进行代理（PHP 中的服务器端或 JS 中的客户端可能使用 BlobUri）。

【解决方案1】：

转到图片的网址并下载。

在 GIMP 或 Illustrator 中打开图像，您可以获得 SVG 代码。

获取该代码并将其粘贴到您的 html 中。

然后使用视图框属性，直到获得正确的缩放比例。

现在您还可以更改 SVG 中的任何内容。

如果您在容器 div 中使用 SVG，则使用

svg{
    width:100%;
    height:auto;
}

在 CSS 中。

因为有了这条规则，SVG 的大小与它们的容器 div 相连。

根据我的经验，对于任何有关 SVG 的操作，总是最好使用纯 SVG XML 代码。

【讨论】：

不可能，因为它必须处理数千个不同的图像，这些图像都来自不同的来源，具有不同的纵横比。 CSS中的max-height也是这里最重要的属性。
好的，挑战又开始了:) 让我多想想。
第一个想法：为什么不对这些 url 发出 AJAX 请求，获取内容，写入 DOM 修改它们的 viewBox 或任何属性？你会不会很慢？
确实我想到的一个解决方案是使用 js 获取图像，使用 MIME-checker 插件查看它是否是 SVG 图像（不幸的是，并非所有文件都有适当的扩展名），如果它是SVG 文件，解析它并检查是否定义了视图框，如果没有，则根据希望定义的宽度和高度添加一个视图框属性。但这对于在所有其他浏览器上开箱即用的东西来说看起来有点麻烦;）。
同样的思路更好。由于动态内容，我想不出任何其他解决方案。有什么事我会写的。