IE11 issue showing svg text with d3

Question

I'm having a strange issue with IE11.

I have a bubble chart done with d3 and with certain transitions. The bubbles are defined as:

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

exactly as:

<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>

Sometimes, after a transition (translate, scale) done on the g element, the text disappears in Internet Explorer, but in Chrome and Firefox, it's shown perfectly. After this happens, if I click on the wrapper svg, the text reappears!

image before transition

image after transition

How can I solve this? Any ideas?