SVG图像不会出现在11上 [英] SVG images doesn't appear on ie 11

问题描述

我正在尝试做的是在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/

>

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

解决方案

您的问题似乎不是图片没有出现，而是没有宽度与SVG < img> 对象相关联。现在，我无法说出具体是否有意义，但我找到了一个简单的解决方法，唯一的（大）缺点是它需要包括< img>



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

  var hiddenDiv = document.createElement（div）; 
 hiddenDiv.classList.add（hidden）; 
  

其中 .hidden 定义为

  .hidden {
 overflow：hidden; 
宽度：0px; 
身高：0px; 
} 
  

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

  var imgObj = document.createElement（'img'）; //注意，new Image（）是来自
 //旧时代的工件，并且是
 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;宽度：0像素;高度：0px;}  

 < div id =output >< / div>  

What i'm trying to do is simple load svg inside img source to later draw it on my canvas. This works fine in all modern browsers and even in ie 9, 10 but not in ie 11. As i look closer it would still call "onload", but loads nothing with zero width and height. Here is very simple example that loads some svg image from wiki and print it's size inside 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/

Now if i draw this image on canvas it won't display.

解决方案

Your problem doesn't seem to be that the image isn't appearing, but that there is no width associated with SVG <img> objects. Now, I am unable to say whether spec-wise that makes any sense or not, however I did find a simple workaround for it, the only (big) disadvantage is that it requires including the <img> in the DOM.

First we create a hidden div:

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

Where .hidden is defined as

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

Next we create the <img> and include it in the 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);

To finally finish off again with your code (without the jQuery as you didn't tag your question as such)

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>

这篇关于SVG图像不会出现在11上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！