1

I have two jsFiddles:

The first jsFiddle shows code which takes HTML and appends it to my ul element. Note that the svg's 'X' icon appears.

I tried to rewrite this code using jQuery's element creation technique, but the path never shows up. If I replace the appending iconPath code with .text("Hello") I see Hello appear. I do not see any CSS differences between the two versions, though.

Could someone shed some light on what is going on?

Sean Anderson
  • 27,963
  • 30
  • 126
  • 237
  • This is pretty interesting. When you hover over the DOM elements in the Firebug DOM view, the SVG nodes in the two versions are identified differently in the flyover text. The working version shows that they're understood to be SVG, while in the non-working version they're not. – Pointy Jul 19 '12 at 16:25

1 Answers1

2

it's parsed as HTML using the browser's innerHTML property. innerHTML can't parse SVG or other non-HTML content...

I guess this article will put some shadow on your questions. It has an example you are looking for. jquery's append not working with svg element?

Community
  • 1
  • 1
user1269989
  • 117
  • 1
  • 5
  • But it **does** work in the first fiddle, and that's doing *almost* the same thing. *edit* - ah OK I see now. – Pointy Jul 19 '12 at 16:25
  • That thread was helpful, but also frustrating. Moving my path element declarations into the svg element's declartation (as a longer HTML string) causes the elements to appear. jQuery fails to append path elements to svg properly, but can append text, apparently. – Sean Anderson Jul 19 '12 at 16:29