SVG中的字体图标在IE中不起作用11

Question

SVG外来元素中的字体图标在IE11中不起作用。尽管它适用于Chrome和Firefox。这里是我的代码

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

如果您在IE中打开11 this fiddler，你会看到在圈子没有图标。然而，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