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

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

Font icon in SVG doesnt work in IE 11

javascript

fonts

d3.js

internet-explorer-11