1

中央にフォント アイコンがあり、下に在庫ラベルがある円であるノードを探しています。これ ( 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')、ロードされていないという問題はないと思います。

これが結果のノードの写真です

私が間違っている場所に関する提案はありますか？

4

1 に答える 1