0

I am using D3.js to append a text element to an SVG group element as follows:

d3.select('#legend').append('text')
                                        .attr('x', 10)
                                        .attr('class', 'remove-country')
                                        .attr('y', 10)
                                        .attr('font-size', '15px')
                                        .attr('font-weight', 'bold')
                                        .attr('fill', '#555')
                                        .style('cursor', 'pointer')
                                        .html('☓')

Here, '#legend' is a group element. The &#9747 is unicode used to print a cross symbol in html. Reference:

http://www.w3schools.com/charsets/ref_utf_misc_symbols.asp

The problem is that this cross symbol is rendering fine on Chrome but doesn't seem to work on Safari. Any different way in which I can show a cross symbol?

Tarun Dugar
  • 8,921
  • 8
  • 42
  • 79

2 Answers2

0

Does Safari render the symbol with a different font to Chrome, perhaps? This might be the case if you're using the default system fonts, in which case Safari's font may not support this particular character. Try perhaps setting an explicit font-family, e.g.:

font-family: 'Zapf Dingbats';
kieranpotts
  • 1,510
  • 11
  • 8
  • I am using Roboto as the default font-family. Safari doesn't render anything. – Tarun Dugar Jul 08 '15 at 09:04
  • 1
    I'm stabbing in the dark here, but you might try the hex code ('☓') instead of the decimal code ('☓'). And finally just reference the character itself ('☓'), which will work only if your HTML/JavaScript file is suitably encoded. – kieranpotts Jul 08 '15 at 09:09
  • Thanks, changed .html('X') to .text('X') and it worked. :) – Tarun Dugar Jul 08 '15 at 10:28
0

I am actually surprised that this would even work in Chrome. According to this link an svg rectangle can't contain a text element. I would suggest you follow the solution given in the link.

Community
  • 1
  • 1
ocket-san
  • 874
  • 12
  • 22