Font-Symbol in SVG funktioniert nicht in IE 11

Question

Font-Symbol in einem SVG fremden Element funktioniert nicht in IE11. Obwohl es in Chrome und Firefox funktioniert. Hier ist mein Code

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'); 

Wenn Sie this fiddler in IE 11 öffnen, werden Sie kein Symbol auf dem Kreis sehen. Jedoch HTML-Symbol (außerhalb von Svg) funktioniert gut in IE11.

Vielen Dank im Voraus.

Answer 1

Warum nicht einfach ein <text> Element verwenden?

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