IE Edge转换问题

Question

我该怎么做才能正确对齐边缘浏览器中svg甜甜圈内的文本。所有其他浏览器显示它很好。

https://codepen.io/anon/pen/gopVwr

<figure class="vendor-donut">
          <div class="figure-content">
            <svg xmlns="http://www.w3.org/2000/svg" class="donut" role="img" viewBox="0 0 42 42" width="100%" height="100%">
              <circle class="donut-ring" role="presentation" fill="transparent" stroke="#f00" stroke-width="3" cx="21" cy="21" r="15.9155" />
              <circle class="donut-segment" fill="transparent" stroke="#140" stroke-dasharray="100, 0" stroke-dashoffset="0" stroke-width="3" cx="21" cy="21" r="15.9155" />
              <g class="chart-text">
                <text class="chart-number" x="50%" y="50%">50</text>
                <text class="chart-label" x="50%" y="50%">out of 100</text>
              </g>
            </svg>
          </div>
        </figure>

CSS

.vendor-donut {width:400px}

.vendor-donut .chart-text {
  -moz-transform: translateY(0.25em);
  -ms-transform: translateY(0.25em);
  -webkit-transform: translateY(0.25em);
  transform: translateY(0.25em);
}
.vendor-donut .chart-number {
  font-size: 0.6em;
  line-height: 1;
  text-anchor: middle;
  -moz-transform: translateY(-0.25em);
  -ms-transform: translateY(-0.25em);
  -webkit-transform: translateY(-0.25em);
  transform: translateY(-0.25em);
}
.vendor-donut .chart-label {
  font-size: 0.2em;
  text-anchor: middle;
  -moz-transform: translateY(0.5em);
  -ms-transform: translateY(0.5em);
  -webkit-transform: translateY(0.5em);
  transform: translateY(0.5em);
}
.vendor-donut .figure-content
{
  flex: 1;
  padding-left: 15px;
  padding-right: 15px;
  align-self: center;
}
.vendor-donut .figure-content svg {
  height: auto;
}

Answer 1

<svg xmlns="http://www.w3.org/2000/svg" class="donut" role="img" viewBox="0 0 42 42" style="width:100%">