IE11问题显示带有d3的svg文本

Question

我对IE11有一个奇怪的问题.

我有一个用d3和某些过渡完成的气泡图.气泡定义为:

<svg>
  <g...>
    <circle ...>
    <text>
    <image>
    <path>
    <line>
    <text> 
  </g>
</svg>

完全如下:

<g class="main-dimension" id="dimension-76" indicator="76" name="Security Alerts" pos-x="184" pos-y="216" original-r="176" transform="translate(184,216)">
    <circle class="main-dimension-circle start" r="176"></circle>
    <text class="main-dimension-title" dy="-74.8" style="font-size: 35px;">Alerts</text>
    <image id="main-dimension-spinner-76" class="spinner" xlink:href="/assets/spinner_big.gif" x="-44" y="-44" width="88" height="88" style="visibility: hidden;"></image>
    <path id="main-dimension-path-76" transform="translate(-153.0434782608696,-44)scale(1.4, 2)" class="area" d="M0,16.225249772933697L13.75,0L27.5,17.30426884650318L68.75,44L82.5,42.28156221616712L110,18.023614895549503L123.75,41.961852861035425L137.5,16.504995458673932L165,44L178.75,44L192.5,44L220,44L220,44L192.5,44L178.75,44L165,44L137.5,44L123.75,44L110,44L82.5,44L68.75,44L27.5,44L13.75,44L0,44Z" style="visibility: visible;"></path>
    <line id="main-dimension-line-76" transform="translate(-153.0434782608696,-44)scale(1.4, 2)" class="area" x1="0" x2="220" y1="44" y2="44" stroke="#00c6d5" stroke-width="0.7" style="visibility: visible;"></line>
    <text id="main-dimension-caption-76" class="main-dimension-caption" dy="88" style="font-size: 29px; visibility: visible;">0 alerts</text>
</g>

有时,在g元素上完成转换(翻译,缩放)后,文本在Internet Explorer中消失,但在Chrome和Firefox中,它显示得非常完美.发生这种情况后,如果我点击包装svg,文本会重新出现!

转型前的形象

转型后的形象

我怎么解决这个问题？有任何想法吗？