在Internet Explorer中縮小到容器的SVG圖像

我的SVG圖像在所有瀏覽器上都能正常工作，除了IE（驚喜...）。在Internet Explorer中縮小到容器的SVG圖像

這裏是我的測試頁：http://plnkr.co/edit/qmv9G3DGRlqDdi9ww58O?p=preview

正如你所看到的，顯示在第一SVG OK（即使在IE瀏覽器），但接下來的兩個不是。他們縮小到一個容器（在這種情況下表格 - > tr - > td）。

代碼：

<!DOCTYPE html> 
<html> 

<head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="script.js"></script> 
    <style> 
    /* this will be applied to the images */ 
    .smallicon { 
     width: 16px; 
     padding: 5px; 
    } 
    </style> 
</head> 

<body> 
    <p> 
    Problem exists in Internet Explorer only 
    <br> This is fine: 
    </p> 

    <object class="smallicon icon-white" data="http://konradpapala.beep.pl/test/040__file_delete.svg" type="image/svg+xml"></object> 

    <table> 
    <thead> 
     <tr> 
     <th>This is not OK, unless we add style = 'width:20px;height:20px' to the td tag, BTW "normal" images, like .png work fine</th> 
     <th>This doesn't work either:</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td> 
      <img class='smallicon' src='http://konradpapala.beep.pl/test/040__file_delete.svg'> 
     </td> 
     <td> 
      <object class='smallicon' data = 'http://konradpapala.beep.pl/test/040__file_delete.svg' type="image/svg+xml"></object> 
     </td> 
     </tr> 
    </tbody> 
    </table> 
</body> 

</html>

任何想法？

順便說一句，我知道這個問題已經存在並被回答（SVG in img element proportions not respected in ie9），但是，解決方案根本無法工作 - 我沒有指定在我的SVG文件中的寬度和高度，而我有一個viewbox指定。

來源

2016-03-09 konrad_firm

不幸的是，當尺寸未指定時，IE似乎無法正確處理SVG的縮放。其他瀏覽器默認的大小爲300x150，否則他們無法確定預期大小。 IE沒有。

因此，您必須爲SVG指定寬度和高度。如果不在SVG本身中，則在<img>或<object>中引用它。

來源

2016-03-09 09:27:28

謝謝！我將「高度」屬性添加到.smallicon類，現在它工作正常，再次感謝！ –

在Internet Explorer中縮小到容器的SVG圖像

回答

相關問題