KhanSharp KhanSharp - 4 months ago 43
Javascript Question

Font icon in SVG doesnt work in IE 11

Font icon in an SVG foreign element isn't working in IE11. Though it works in Chrome and Firefox. Here is my 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');


If you open this fiddler in IE 11, you will see no icon on the circle. However html icon (outside of svg) works fine in IE11.

Thanks in advance.

Answer

Why not just use a <text> element?

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