小编Bra*_*ram的帖子

我有一个外部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图像没有定义视图框.

任何解决方案都赞赏!

为什么以下代码片段中从未触发 onload 事件？

var img = new Image()
img.onload = function() {
  alert("ok");
}
var svg = '<svg height="100" width="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>'

img.src = 'data:image/svg+xml;base64,'+ btoa(svg);

jsfiddle 链接： https: //jsfiddle.net/venmmn3b/1/