SVGのフォントアイコンがIE 11で機能しない

Question

IE11でSVGの外部要素のフォントアイコンが機能しません。 ChromeとFirefoxでは動作しますがここでは、IE 11にthis fiddlerを開いた場合、あなたがサークルにはアイコンが表示されません私のコード

var svg = d3.select('#item svg'); 

svg.append('circle') 
    .attr('r', 50) 
    .attr('cx',100) 
    .attr('cy', 100) 
    .style('fill', 'lightgray'); 

svg.append('svg:foreignObject') 
      .attr('x', 100) 
      .attr('y', 100) 
      .append('xhtml:span') 
      .attr('class', ' glyphicon glyphicon-glass') 
      .style('fill', 'white'); 

です。しかし、HTMLアイコン（svgの外）はIE11で正常に動作します。

ありがとうございます。

Answer 1

なぜ<text>要素を使用しないのですか？

https://jsfiddle.net/vyz3dgff/2/

var svg = d3.select('#item svg'); 
svg.append('circle') 
    .attr('r', 50) 
    .attr('cx',100) 
    .attr('cy', 100) 
    .style('fill', 'lightgray'); 

svg.append('svg:text') 
     .attr('x', 100) 
     .attr('y', 100) 
     .attr('class', 'glyphicon') // note no glyph selection 
     .attr('text-anchor', 'middle') // horizontal alignment 
     .attr('dy', '0.5em')   // vertical alignment 
     .style('font-size', '48px') 
     .style('fill', 'white') 
     .text("\ue001");    // glyph as defined in the font