SVG 图像不会出现在 IE 11 上

Question

我要做的是在 img 源中简单地加载 SVG，以便稍后在我的画布上绘制它。这在所有现代浏览器甚至 IE 9、10 中都可以正常工作，但在 IE 11 中却不行。当我仔细观察时，它仍然会调用“onload”，但不会加载任何宽度和高度为零的内容。这是一个非常简单的示例，它从 wiki 加载一些 SVG 图像并在 div 中打印它的大小：

var imgObj = new Image();

imgObj.onload = function(){
    $("#output").html(imgObj.width);
};

imgObj.src = 'https://upload.wikimedia.org/wikipedia/commons/1/15/Svg.svg';

https://jsfiddle.net/zmLtrbr9/

现在，如果我在画布上绘制此图像，它将不会显示。

Answer 1

您的问题似乎不是图像没有出现，而是没有 width 与 SVG <img> 对象关联。现在，我无法说规范方面是否有意义，但我确实找到了一个简单的解决方法，唯一（大）缺点是它需要在 DOM 中包含 <img>。

首先我们创建一个隐藏的div：

var hiddenDiv = document.createElement("div");
hiddenDiv.classList.add("hidden"); 

.hidden 定义为

.hidden{
    overflow:hidden;
    width:0px;
    height:0px;
}

接下来我们创建 <img> 并将其包含在 DOM 中

var imgObj = document.createElement('img'); //Note, new Image() is an artifact from
                                            // older times and synonymous for this
hiddenDiv.appendChild(imgObj);
document.body.appendChild(hiddenDiv);

最终再次完成您的代码（没有 jQuery，因为您没有标记您的问题）

imgObj.onload = function(){
    document.querySelector("#output").textContent = imgObj.width;
};
imgObj.src = 'https://upload.wikimedia.org/wikipedia/commons/1/15/Svg.svg';

var hiddenDiv = document.createElement("div");
hiddenDiv.classList.add("hidden");

var imgObj = document.createElement('img');
hiddenDiv.appendChild(imgObj);
document.body.appendChild(hiddenDiv);

imgObj.onload = function(){
    document.querySelector("#output").textContent = imgObj.width;
};
imgObj.src = 'https://upload.wikimedia.org/wikipedia/commons/1/15/Svg.svg';

.hidden{
    overflow:hidden;
    width:0px;
    height:0px;
}

<div id="output"></div>