SVG 图像缩小到 Internet Explorer 中的容器答案

【问题标题】：SVG images scaling down to a container in Internet ExplorerSVG 图像缩小到 Internet Explorer 中的容器
【发布时间】：2016-06-23 12:56:48
【问题描述】：

我的 SVG 图像在所有浏览器上都能正常工作，除了 IE（惊喜...）。

这是我的测试页面：http://plnkr.co/edit/qmv9G3DGRlqDdi9ww58O?p=preview

如您所见，第一个 svg 显示正常（即使在 IE 中），但接下来的两个不是。它们缩小到一个容器（在本例中为 table -> 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 文件中没有指定宽度和高度，而我确实有指定的视图框。

【问题讨论】：

标签： html css svg

【解决方案1】：

不幸的是，当尺寸未指定时，IE 似乎无法正确处理 SVG 的缩放。当其他浏览器无法确定预期大小时，默认大小为 300x150。 IE 没有。

因此，您必须为 SVG 指定宽度和高度。如果不在 SVG 本身中，则在引用它的 <img> 或 <object> 中。

【讨论】：

谢谢！我在 .smallicon 类中添加了“height”属性，现在它工作正常，再次感谢！