wheelnav.js 库菜单项中的 Unicode 实体（在底层使用 raphael.js）[SVG]

Question

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

不幸的是，根据我从 wheelnav.js 源代码中了解到的情况，在创建 SVG 文本节点（及其 tspan child）时底层 raphael.js 转义特殊字符并将 & 更改为 &导致实体按字面显示而不是相应的图标。

我想出的唯一解决方案是从 Font Awesome 网站复制粘贴字符（图标）到标题字符串。它有效，在浏览器中我可以看到一个图标，但在我的 IDE 中我只看到矩形。
这让其他开发人员不清楚和不可读，我不能指望他们安装 Font Awesome在他们的 IDEs.

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

 var icons = {
        'key': '&#xf084;',
        'cogs': '&#xf085;',
        '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 unicode 字符文字，而不是直接使用 HTML 实体或字符。

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

wheelnav.js 库菜单项中的 Unicode 实体（在底层使用 raphael.js）[SVG]

Unicode entity in menu item of wheelnav.js library (using under the hood raphael.js) [SVG]

javascript

svg

unicode

raphael

wheelnav.js