SVG图像不会出现在11上

Question

我正在尝试做的是在img源代码中简单加载svg以便稍后在我的画布上绘制它。这在所有现代浏览器中工作正常，甚至在9,10但不在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';

http://jsfiddle.net/zmLtrbr9/

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

Answer 1

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

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

＆＃13;

＆＃13;

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';

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;