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

【问题标题】：HTML5 - SVG issue with rendering an image in IE 11HTML5 - 在 IE 11 中渲染图像的 SVG 问题
【发布时间】：2016-03-31 23:54:11
【问题描述】：

我在使用 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 存在问题的不正确语法？

【问题讨论】：

这对stackoverflow.com/questions/26271034/…有帮助吗？
你忘了设置svg的高宽，IE不喜欢...
@Kaiido - 这似乎已经解决了。如果您将此创建为答案，我会投票并接受它。
这会要求我对规格等进行一些研究......另外，我想某处已经存在欺骗。我会先检查一下，如果没有找到，搜索规范，最后发布一个答案，但我的猜测是问题应该关闭而不是回答。
找不到任何直接相关的内容...我将添加评论作为答案然后...

标签： html svg

【解决方案1】：

你只是忘了设置svg的高宽，IE不喜欢……

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

所以要么在 svg 标签上设置绝对高度和宽度属性，要么通过 css 设置，要么绝对在 svg 上，要么绝对在它的容器上（这里的 <div>），或者相对地在它的每个容器上（@ 987654323@这里）。

【讨论】：