The project:I'm currently undertaking a task of dynamically creating SVG elements through JS + jQuery. It's all going well, and I'm able to draw all the basic shapes onto the screen.The problem:When I try and declare the shapes in a \[code\]<DEFS>\[/code\] block, and draw with \[code\]<USE>\[/code\], nothing is drawn onto the screen.The confusion:Although nothing is drawn onto the screen, if I inspect the dynamic DOM through Firebug or Chrome's Dev tools, the syntax is fine; I can even copy out the syntax, place in a \[code\].SVG\[/code\] file and it will work fine.Additional information:
- I'm using inline SVG
- Using xhtml as opposed to html
- Mainly using the jQuery framework
- Anything outside \[code\]USE\[/code\] and \[code\]DEFS\[/code\] work fine.
My jQuery code:\[code\]var $root = $('#svgRoot'); $(document).ready(function(e) { init($root); var $defBlock = $(def(null, {})); $(ellipse('petal', {cx: '50%', cy: '50%', rx: '75', ry: '15'}, $defBlock)); $(use(null, { x: '10%', y: '10%', fill:'purple' , 'xlink:href':'#petal'})); });\[/code\]These are all custom functions, 1st paramaters are the element IDs, everything else are attributes. The third parameter is optional. It specifies the parent to append to. If null, it appends to the root SVG node. If specified, it attatches to that parent.The output when inspecting with Chrome:\[code\]<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svgRoot" version="1.1"> <svg:defs xmlns:svg="http://www.w3.org/2000/svg"> <svg:ellipse id="petal" cx="50%" cy="50%" rx="75" ry="15" /> </svg:defs> <svg:use xmlns:svg="http://www.w3.org/2000/svg" x="10%" y="10%" fill="purple" xlink:href="http://stackoverflow.com/questions/15622333/#petal" /></svg>\[/code\]Help!Does anyone have any experience with code not being rendered, even though the underlying DOM is correct, and works when placed in an independent \[code\].SVG\[/code\] file?
