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

【问题标题】：Fonts in custom SVG node Image with vis.js network带有 vis.js 网络的自定义 SVG 节点图像中的字体
【发布时间】：2018-02-13 17:05:12
【问题描述】：

我正在寻找中间带有字体图标和下方股票标签的圆形节点。这 (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', '&#xf03d;', 'FontAwesome')，所以我认为问题不在于它没有加载。

Here's a pic of the resulting node

对我哪里出错有什么建议吗？

【问题讨论】：

（看起来与 jsbin 的结果没有太大区别：SVG 渲染器如何知道命名的字体？）
我尝试将和

标签： vis.js-network vis.js

【解决方案1】：

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

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

【讨论】：