字体在自定义SVG节点图像与vis.js网络

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);
}

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

这是结果节点

的图片

我哪里错了，有什么建议吗?

Answer 1

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

"记住!javascript中的Unicode是这样做的:uf274表示Unicode f274。如果节点显示为矩形，则表示css未加载(或尚未加载)。重新绘制会解决这个问题。"