Struggling to create SVG shape using JavaScript

Question

Hi,

I have already read the other questions relating to SVG creation using JavaScript and followed any links, but I can't seem to get this to work. Maybe somebody here can spot where I'm going wrong.

EDIT: I currently have a div with the ID 'svgbasics' in the body of the document, and I'm trying to create an SVG shape using values I have retrieved from an XML document.

When I load the page, nothing appears.

Here's my code:

                      var questions = [];
                  for (j=0; j<arrayIds.length; j++)
                  { 
                    $(xml).find("C[ID='" + arrayIds[j] + "']").each(function(){
                        // pass values
                        questions[j] = 
                        {
                            typ: $(this).attr('typ'),
                            width: $(this).find("I").attr('wid'),
                            height: $(this).find("I").attr('hei'),
                            x: $(this).find("I").attr('x'),
                            y: $(this).find("I").attr('x'),
                            baC: $(this).find("I").attr('baC'),
                            boC: $(this).find("I").attr('boC'),
                            boW: $(this).find("I").attr('boW')
                        }


                        if ($(this).attr('typ') == '3')
                        {
                              var shape = this.id;
                              var svg = $('#svgbasics').svg('get');

                              svg.rect(x($(this).find("I").attr('x')),
                              y($(this).find("I").attr('y')),
                              width($(this).find("I").attr('width')),
                              height($(this).find("I").attr('height')),
                              {fill: colours[$(this).find("I").attr('baC')]});

                        } else {
                            // Add here
                            alert($(this).find("I").attr('x'));
                        }
                    });
                  }

Answer 1

It's rather hard to say what's wrong without having the full context. I'd first suggest inspecting your content in a DOM/JS debugger, e.g Opera Dragonfly, Webkit Web Inspector or Mozilla Firebug. Verify that all your elements are created correctly, and that it looks like you expect in the DOM tree.