javascript - SVG 图像不会出现在 IE 11 上

Question

我想要做的是简单地在 img 源中加载 SVG，以便稍后在我的 Canvas 上绘制它。这在所有现代浏览器中都能正常工作，甚至在 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/

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

Answer 1

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

首先我们创建一个隐藏的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>