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

Posted

技术标签:

【中文标题】Wheelnav.js 库的菜单项中的 Unicode 实体(在引擎盖下使用 raphael.js)[SVG]【英文标题】:Unicode entity in menu item of wheelnav.js library (using under the hood raphael.js) [SVG] 【发布时间】:2019-05-07 03:28:35 【问题描述】:

由于 wheelnav.js 库允许程序员将菜单项定义为文本或图像。永远不要同时为一个菜单元素,我需要图标 + 文本我想出了将图标编码为 un​​icode 实体,这并不难,因为我使用 Font Awesome。

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

我想出的唯一解决方案是将字符(图标)从 Font Awesome 网站复制粘贴到标题字符串。它工作正常,在浏览器中我可以看到一个图标,但在我的 IDE 中我只看到矩形。它使其他开发人员不清楚且不可读,我不能指望他们在他们的 IDE 中安装 Font Awesome。

是否有任何其他巧妙的方法可以防止 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

它的样子:

它应该是什么样子:

感谢您的帮助:)

【问题讨论】:

【参考方案1】:

您可以尝试使用 JS unicode 字符文字,而不是直接使用 html 实体或字符。

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

【讨论】:

以上是关于Wheelnav.js 库的菜单项中的 Unicode 实体(在引擎盖下使用 raphael.js)[SVG]的主要内容,如果未能解决你的问题,请参考以下文章

将菜单添加到加载项中的 Visual Studio 菜单栏

侧边菜单项中的下拉按钮

下拉菜单项中的 jquery 滑块导致太多事件

Android:更改菜单项中的图标颜色

[在运行菜单项中添加Eclipse默认菜单项

在我的WordPress菜单项中添加#无法正常工作