如何在 IE11 中从 svg 图像的顶部和底部删除多余的空间答案

【问题标题】：How to remove extra space from top and bottom of svg image in IE11如何在 IE11 中从 svg 图像的顶部和底部删除多余的空间
【发布时间】：2019-04-02 15:36:31
【问题描述】：

我正在使用 SVG 来显示结果，并希望在 defaultSize 容器的中心对齐项目。在 chrome 中，svg 图像正确居中，但在 IE 11 中，svg 图像的顶部和底部会显示额外的空间，并且还会显示垂直滚动条。

.svgImage {
    width: auto;
    display: flex;
    align-items: center;
    height: 100%;
}

.defaultSize svg {
    -webkit-transform: scale(2);
    transform: scale(2);
    -webkit-transform-origin: left;
    transform-origin: left;
}

<div class="defaultSize">
  <div class="svgImage">
    <svg viewbox="0 0 1435.01 184.01">....</svg>
  </div>
</div>

SVG 显示在 chorme 中：https://i.stack.imgur.com/yyndu.png

在 IE 中显示的 SVG：https://i.stack.imgur.com/srdfN.png

【问题讨论】：

标签： html css svg

【解决方案1】：

你需要 display: block;在你的 svg 上。

【讨论】：

添加 display:block on svg 后没有变化