IE11中SVG上方和下方的额外空间

Question

我有一个问题，当浏览器水平调整大小时，svg上方和下方会出现额外的空间。它似乎在Chrome中运行良好。这是一个有效的例子：

这就是它在chrome中的样子：

这是在IE11：

要复制相同的问题，您需要水平调整浏览器窗口的大小。

如何删除多余的空间？

这是我正在使用的代码：

＆＃13;

＆＃13;

function animateSVG(a){function f(b){b<0&&(b=0),b>100&&(b=100);var c=(100-b)/100*e;a[0].style.strokeDashoffset=c}var b=a.find(".circle_foreground"),c=a.data("percent"),d=b[0].getAttribute("r"),e=Math.PI*(2*d);a[0].style.strokeDashoffset=e,setTimeout(function(){f(c)},0),a.find(".circle_text").text(c+"%")}animateSVG($("#circle_ok")),animateSVG($("#circle_recommended")),animateSVG($("#circle_urgent")),animateSVG($("#circle_undefined"));

＆＃13;

.container {
  display: flex;
  flex-direction: row;
}
.circle {
  text-align: center;        
  flex-grow:1;
  flex-basis: 0;
}
.circle_foreground {
  fill: transparent;
  stroke: rgb(101, 159, 33);
  stroke-width: 6;
  stroke-dasharray: 282.6; /* the circuference 3.14 x diameter */
  stroke-linecap: round;
  -webkit-transition: stroke-dashoffset 5s;
  stroke-miterlimit: 10;
}
.circle_background {
  fill: transparent;
  stroke: rgba(0, 0, 0, 0.2);
  stroke-width: 10;
  stroke-miterlimit: 10;
}
.circle_text {
  font-size: 15px;
  font-family: 'Segoe UI';
  fill: #666;
}
.circle.recommended .circle_foreground {
  stroke: rgb(255, 161, 0);
}
.circle.urgent .circle_foreground {
  stroke: rgb(255, 56, 0);
}
.circle.undefined .circle_foreground {
  stroke: #666;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

  <div class="circle ok" id="circle_ok" data-percent="44">
    <svg version="1.1" class="circle_container" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve" preserveAspectRatio="xMidYMid">
      <text class="circle_text" text-anchor="middle" x="50" y="55"></text>
      <circle class="circle_background" cx="50" cy="50" r="45" transform="rotate(-90, 50, 50)" />
      <circle class="circle_foreground" cx="50" cy="50" r="45" transform="rotate(-90, 50, 50)" />
    </svg>
    <div>Ok</div>
  </div>

  <div class="circle recommended" id="circle_recommended" data-percent="16">
    <svg version="1.1" class="circle_container" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve" preserveAspectRatio="xMidYMid">
      <text class="circle_text" text-anchor="middle" x="50" y="55"></text>
      <circle class="circle_background" cx="50" cy="50" r="45" transform="rotate(-90, 50, 50)" />
      <circle class="circle_foreground" cx="50" cy="50" r="45" transform="rotate(-90, 50, 50)" />
    </svg>
    <div>Recommended</div>
  </div>

  <div class="circle urgent" id="circle_urgent" data-percent="27">
    <svg version="1.1" class="circle_container" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve" preserveAspectRatio="xMidYMid">
      <text class="circle_text" text-anchor="middle" x="50" y="55"></text>
      <circle class="circle_background" cx="50" cy="50" r="45" transform="rotate(-90, 50, 50)" />
      <circle class="circle_foreground" cx="50" cy="50" r="45" transform="rotate(-90, 50, 50)" />
    </svg>
    <div>Urgent</div>
  </div>

  <div class="circle undefined" id="circle_undefined" data-percent="13">
    <svg version="1.1" class="circle_container" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve" preserveAspectRatio="xMidYMid">
      <text class="circle_text" text-anchor="middle" x="50" y="55"></text>
      <circle class="circle_background" cx="50" cy="50" r="45" transform="rotate(-90, 50, 50)" />
      <circle class="circle_foreground" cx="50" cy="50" r="45" transform="rotate(-90, 50, 50)" />
    </svg>
    <div>Not Set</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;