title: Jquery: create dynamic SVG lines
body: <p>I'm trying to create a dynamic SVG overlay over an iframe in my application. The line elements within my SVG need to be dynamically set. The function works and does add the SVG element to the page, but the lines within it do not show. When I use the inspector it says the line height / width is both 0px.</p>
  
  <p>Normal html appears to work which leads me to a problem in my script?</p>
  
  <pre><code> _createGridOverlay: function () {
      var svg = $('&lt;svg&gt;').attr({id: 'ppGrid', xmlns: "http://www.w3.org/2000/svg", "xmlns:xlink": "http://www.w3.org/1999/xlink"});
      var ll = $('&lt;line&gt;').attr({x1: 500, y1: 0, x2: 500, y2: 500}).css({"stroke": "#000", "stroke-width": "2px"});
      var rl = $('&lt;line&gt;').attr({x1: "1000", y1: "0", x2: "1000", y2: "1000"}).css({"stroke": "#000", "stroke-width": "2px"});
      svg.append(ll);
      svg.append(rl);
      $(ppApp.config.editorContainer).append($(svg));
  },
  </code></pre>