Safari / SVG / Unicode：Safari中不呈现Unicode字符

Question

我正在使用D3.js将文本元素附加到SVG组元素，如下所示：

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('☓')

这里，'＃legend'是一个组元素。 ＆amp;＃9747是用于在html中打印十字符号的unicode。参考：

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

问题是这个十字符号在Chrome上呈现正常但似乎不适用于Safari。我可以用任何不同的方式展示十字符号吗？

Answer 1

Safari可能会使用与Chrome不同的字体呈现符号吗？如果您使用默认系统字体，可能就是这种情况，在这种情况下，Safari的字体可能不支持此特定字符。尝试设置一个明确的font-family，例如：

font-family: 'Zapf Dingbats';

Answer 2

我真的很惊讶这甚至可以在Chrome中使用。根据这个link，svg矩形不能包含文本元素。我建议你按照链接中给出的解决方案。