wheelnav.js库菜单项中的Unicode实体(在raphael.js下使用) [SVG]

Question

因为wheelnav.js libray允许程序员将菜单项定义为文本或图像。永远不要同时为一个菜单元素，我需要图标+文本，我想出编码图标作为一个unicode实体，这并不困难，因为我使用字体Awesome。

不幸的是，我从wheelnav.js源代码中了解到，在创建SVG文本节点(以及它的tspan子节点)时，底层的raphael.js会转义特殊的字符和更改& to &&从而导致实体被逐字显示，而不是相应的图标。

我想出的唯一解决方案是复制字符(图标)，从Font网站到标题字符串。它可以工作，在浏览器中我可以看到一个图标，但是在我的IDE中我只看到矩形。

它使它不清楚和不可读的其他开发人员，我不能指望他们安装字体Awesome在他们的IDE。

有没有其他聪明的方法来防止wheelnav.js (raphael.js)转义特殊字符或解决我的问题的任何其他解决方案？

 var icons = {
        'key': '',
        'cogs': '',
        'connection': '' //copypasting character, that would work.
     };

var items = [ {title: icons.key + 'Security'},
              {title: icons.cogs + 'Settings'},
              {title: icons.connection + 'Connection'} ];

var piemenu = new wheelnav('main_menu');
piemenu.initWheel(items.map(function(item){
                                        return item.title;
                                    }));
piemenu.createWheel();

JSFiddle

它的外观：

​

​

它应该是什么样的：

​

​

谢谢你的帮助:)

Answer 1

您可以尝试使用JS字符文本，而不是直接使用HTML实体或字符。

var icons = {
   'key':  '\uf084',
   'cogs': '\uf085',
   ...
};