Safari/SVG/Unicode：Unicode 字符未在 Safari 中呈现答案

【问题标题】：Safari/SVG/Unicode: Unicode character not rendering in SafariSafari/SVG/Unicode：Unicode 字符未在 Safari 中呈现
【发布时间】：2015-09-26 01:53:58
【问题描述】：

我正在使用 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('&#9747;')

这里，“#legend”是一个组元素。 ☓ 是用于在 html 中打印十字符号的 unicode。参考：

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

问题是这个十字符号在 Chrome 上渲染得很好，但在 Safari 上似乎不起作用。有什么不同的方式可以显示十字符号吗？

【问题讨论】：

标签： javascript d3.js svg unicode safari

【解决方案1】：

Safari 是否会使用与 Chrome 不同的字体来渲染符号？如果您使用的是默认系统字体，则可能会出现这种情况，在这种情况下，Safari 的字体可能不支持此特定字符。尝试设置一个明确的字体系列，例如：

font-family: 'Zapf Dingbats';

【讨论】：

我使用 Roboto 作为默认字体系列。 Safari 不渲染任何东西。
我在这里是在黑暗中刺伤，但您可以尝试使用十六进制代码 ('☓') 而不是十进制代码 ('☓')。最后只引用字符本身（'☓'），这只有在您的 HTML/JavaScript 文件经过适当编码时才有效。
谢谢，将 .html('X') 更改为 .text('X') 并且有效。 :)

【解决方案2】：

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

【讨论】：

对不起，它不是一个矩形，而是一个组元素。