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');
如果您打开this fiddler在 IE 11 中,您将在圆圈上看不到任何图标。然而 html 图标(svg 之外)在 IE11 中工作正常。
提前致谢。
最佳答案
为什么不直接使用 <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
关于javascript - SVG 中的字体图标在 IE 11 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38744662/