IE 中的 HTML 内联 SVG 边距

Question

我有这个html

<div class="foot">
  <svg version="1.1" id="svgfooter" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 300 91">
    <polygon id="svgpolygon" fill="#017EFF" points="0,0 300,0 300,71 150,91 0,71 "/>
  </svg>
  <div class="title">
    TEST
  </div>
</div>

用下面的CSS

.foot {
  position:relative;
  background: #999999;
  width:350px;
}
#svgfooter {
  display:block;
  margin:0px;
  padding:0px;
  width:350px;
}
#svgpolygon {
  display:block;
  margin:0px;
}
.title {
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  line-height:90px;
  height:90px;
  color: #ffffff;
  text-align: center;
  font-size:24px;
}

我想通过将相关的 div 绝对定位在 SVG 上来将 TEST 文本定位在 SVG 上。整个 shabang 应该是有响应的。到目前为止一切顺利，它在 Firefix、Chrome 和 Safari 中运行良好，但在 IE 中运行不佳。

IE 为 SVG 显示了较大的顶部和底部边距。标题位置很好。我无法删除这些边距。

这里有什么问题？不能在IE中完成吗？

Codepen

Answer 1

我相信 IE 有解决此问题的方法，但我不记得它是什么。这里有人会知道。

与此同时，您可以通过设置 preserveAspectRatio="xMidYMin meet" 来缓解此问题。在 <svg> 上.至少那时它会与 <div> 的顶部对齐.