css - jQuery SVG プラグインと動的に追加された fontawesome が機能しない

Question

jQuery SVG Plugin を使用して、クライアント (Web ブラウザー) 側で SVG を操作しています。

特定の状況で、FontAwesome アイコンを SVG に追加する必要があります。SVG 上の FontAwesome アイコンは、jQuery SVG プラグインによってロードされる元の SVG の一部である場合、正常に機能します。

この問題は、次の行で動的なアイコンを追加することで発生します。ここmainSVGで、グローバル SVG オブジェクトです。

mainSVG.text(null, x, y, '&#'+iconCode);

ここで、iconCode は "xf007" のようなもので、その後に位置とスタイルの属性を追加します。

テキスト要素をsvgに追加するとうまくいきます。結果は string'&#xf007'であり、現在 svg の一部となっている text-object の洞察が追加されます。

<text x="49" y="139" style="font-family: FontAwesome; 
      font-weight: normal; font-size: 6px;" class="dot">

      &#xf007 

</text>

ただし、アイコンではなく文字列として表示されます。ところで、FontAwesome の css スタイル定義が読み込まれ、SVG の既知の洞察が得られます。

問題は、非常に小さな変更 (SVG 要素の間に空白を追加するなど) のために firebug を使用して SVG を変更すると、アイコンが目に見えるようになることです。

私にとって、これは非常に奇妙な動作であり、ブラウザは新しく追加されたアイコンに気付かないだけです。または: ブラウザーは、firebug を使用して svg オブジェクトに小さな変更を加えた後にのみ、新しく追加されたアイコンに気付きます。

私の質問は次のとおりです: jQuery を使用して動的な FontAwesome アイコンを svg に追加するにはどうすればよいですか、または既存の css 定義を使用してアイコンを表示するために、ブラウザ/svg「ビューアー」プラグインをトリガーしてアイコンを通知するにはどうすればよいですか?