0

I'm using jQuery SVG Plugin to work with SVG on client (web browser) side.

At an specific situation, I have to add an FontAwesome icon to the SVG. FontAwesome icons on SVG works well, normally, if they are part of the origin SVG, which is loaded by the jQuery SVG plugin.

The problem appears by adding icons dynamic with the following line, where mainSVG is the global SVG object.

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

Where iconCode is something like "xf007" ...followed by adding some position and style attributes.

Adding the text element to the svg works fine. The result is a string '&#xf007', which is added insight an text-object which is now part of to the svg.

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

      &#xf007 

</text>

But: it's shown as an string and not as an icon. By the way: the css style definition for the FontAwesome is loaded and known insight the SVG.

The thing is: if I modify the SVG using firebug for an very tiny change (like adding an blank between to SVG elements), the icon become visibly.

For me this is a very strange behaviour an it looks like, the browser simply doesn't notice new added icon. Or: the browser notice the new added icon only after making some tiny change on the svg object using firebug.

So my question is: how can I add dynamic FontAwesome icons to an svg using jQuery or how can I trigger the browser / svg "viewer" plugin to notice the icon in order to display the icon by using the existing css definition?

The Bndr
  • 13,204
  • 16
  • 68
  • 107
  • Similar to http://stackoverflow.com/questions/3165501/unicode-to-a-form-with-javascript – Erik Dahlström Oct 11 '13 at 14:43
  • @ErikDahlström That sounds interesting. Sorry, my question was not exact enough. The problem is: I generate the unicode character by concatenate strings. I updated my question to make it less abstract. Please take a look. But if I change `mainSVG.text(null, x, y, ''+iconCode);` to `mainSVG.text(null, x, y, '\u'+iconCode);` I get an javascript error `"malformed Unicode character escape sequence"` I didn't found a solution by searching the web :-( Any ideas? – The Bndr Oct 11 '13 at 20:45
  • See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Unicode_escape_sequences (you should not have the `x` in `ZZZZ` if you convert to `\uZZZZ`) – Erik Dahlström Oct 11 '13 at 21:05
  • @ErikDahlström Thank you for that fast and helpful replay. By the way: I have to "prepare" the character (for example `f007`) like this `var iconCode="0x"+iconCode; //0xf007 iconCode=String.fromCharCode(iconCode);`. Now I can use `mainSVG.text(null, x, y, iconCode);` – The Bndr Oct 11 '13 at 21:52

0 Answers0