在IE11中SVG图像严重缩放

Question

我有一个外部SVG图像,它不会在IE11中保持纵横比.

.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>

(https://jsfiddle.net/9q3cL4cs/7/)

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

任何解决方案都赞赏!

Answer 1

转到图像的 url 并下载它。

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

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

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

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

如果您在容器 div 内使用 SVG，那么使用

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

在 CSS 中。

因为通过这个规则，SVG 大小与其容器 div 相关联。

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