vis.js-network - 带有 vis.js 网络的自定义 SVG 节点图像中的字体

Question

我正在寻找中间有一个字体图标和下面的股票标签的圆圈的节点。这（http://jsbin.com/hiqega/3/edit?js,output）非常接近我正在寻找的内容，只是我需要传递字体名称和要使用的图标代码。

function nodeImage(color, icon, font)
{
  var svg = '<svg xmlns="http://www.w3.org/2000/svg" ' +
                 'width="120" height="120" viewPort="0 0 120 120">' +
            '<ellipse ry="55" rx="55" cy="60" cx="60" ' +
                 'style="fill:' + color + ';stroke:black;stroke-opacity:.5;stroke-width:4;" />' +
            '<text x="61" y="63" text-anchor="middle" dominant-baseline="middle" ' +
                 'style="font-family:' + font + ';font-size:100px;fill:black;fill-opacity:.5;">' +
                 icon + '</text>' +
            '</svg>';
  return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
}

我nodeImage('red', '', 'FontAwesome')在一个已经在其他地方使用该字体的页面中这样调用它，所以我认为问题不在于它没有加载。

这是结果节点的图片

关于我要去哪里错的任何建议？

Answer 1

我认为您需要编写 nodeImage('red', '\uf03d', 'FontAwesome')。http://visjs.org/examples/network/nodeStyles/icons.html

“记住！javascript 中的 Unicode 是这样完成的：\uf274 表示 unicode f274。如果节点显示为矩形，则表示 CSS 未加载（或尚未加载）。重绘将解决此问题。”