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