Creating elements & setting attributes with a namespace.

Creating elements & setting attributes with a namespace.

Hey guys!


I'm working on an app, which creates visualizations based on SVG. I was using jQuery SVG by Keith Wood at first ( http://keith-wood.name/svgRef.html ), but at some point I've noticed that it's very inconvenient for some stuff and wrote my own functions to handle everything.


One of the quirks when creating svg trees dynamically is that you have to create all elements and set attributes using the SVG namespace ("http://www.w3.org/2000/svg"), otherwise they aren't rendered correctly by browsers. 


Here's an example of how you create a text element...


  1. var svgns = "http://www.w3.org/2000/svg";
  2. var newText = document.createElementNS(svgns,'text');
  3. newText.setAttributeNS(null,"x","0");
  4. newText.setAttributeNS(null,"y","0");
  5. $(newText).text("some text");
  6. $(svgGroup).append(newText);

There doesn't seem to be a way to do that more effectively using jQuery. For instance, you can't use attr to set multiple attributes, since it won't use setAttributeNS.

Any suggestions?

Regards,
Michael