HTML5 - 在IE 11中渲染图像的SVG问题

Question

我在使用SVG在IE 11中渲染图像时遇到问题。 Chrome中不存在此问题。我对SVG的经验也很少。在这种情况下我只选择了SVG，这样我就可以创建一个在iOS下运行的图像映射，而常规图像映射则不然。

我有以下HTML代码：

<div>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 800" preserveAspectRatio="xMinYMin meet">
        <image width="1200" height="800" xlink:href="/Images/PortalPageNonMobile.jpg"></image>

        <a xlink:href="http://www.wildlifenaturedestinations.com/Home/Index/?Redirect=false">
            <rect x="115" y="90" fill="#fff" opacity="0" width="310" height="95" />
        </a>

        <a xlink:href="http://www.wildlifenaturedestinations.com/Home/Index/?Redirect=false">
            <rect x="700" y="90" fill="#fff" opacity="0" width="330" height="95" />
        </a>
    </svg>
</div>

在Chrome中，图片会显示在页面中，并且几乎消耗整个页面。但是，在IE 11中，图像非常小，可能是200像素x 200像素，而不是1200 x 800.您可以在下面看到它的屏幕截图。图像应占用大部分灰色区域，这是我的浏览器背景。我的HTML中是否有错误的语法，Chrome没有问题，IE确实存在？

Answer 1

你只是忘了设置svg的高度和宽度，IE不喜欢它......

我还没有找到关于它的规格，但没有设置高度和宽度，浏览器应该将其视为100%，其中IE似乎有一些问题...

所以要么在svg标签上设置绝对高度和宽度属性，要么通过css设置，绝对在svg上，或绝对在其容器上（这里是<div>），或者相对于每个容器（html,body,div{width: 100%; height:100%}此处）。