即Edge svg文本填充渲染错误

Question

我是SVG的新手。当我使用Vue.js更改SVG的填充属性时。这是位置渲染错误！但在其他浏览器中正确呈现！我尝试google并在stackoverflow中搜索，但没有解决方案来解决问题。谢谢。

<svg width="8.4em" height="2.2em" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 315 70">
  <g>
    <text x="50%" y="50%" :fill="data.fill">
  </g>
</svg>

在IE边缘

• 问题链接（PS：我的声誉低于10，所以粘贴链接：）

https://i.stack.imgur.com/9i7tf.png

但在IE10，IE11

上没问题

，演示网址为：http://codepen.io/WangXiZhu/pen/PpxBWW