title: jQuery-added svg elements do not show up
body: <p>Sorry if this has already been answered, I am new to SO.</p>
  
  <p>I am trying to create svg elements using jquery, and I have this code as part of an HTML page:</p>
  
  <pre><code>&lt;svg viewBox="0 0 1000 500"&gt;
      &lt;defs&gt;
          &lt;clipPath id="clip"&gt;
              &lt;ellipse cx="100" cy="250" rx="200" ry="50" /&gt;
          &lt;/clipPath&gt;
      &lt;/defs&gt;
      &lt;g&gt;
          &lt;path d="M 0,0 L 1000,0 1000,500 0,500"
              fill="#9ADEFF" /&gt;
          &lt;path id="boat" stroke="none" fill="red"
              d="M 100,175 L 300,175 300,325 100,325"
              clip-path="url(#clip)" /&gt;
      &lt;/g&gt;
      &lt;g id="0002" width="100" height="100%"
          transform="translate(1000)"&gt;
          &lt;line x1="50" y1="0" x2="50" y2="300"
              stroke="green" stroke-width="100" /&gt;
      &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>and this Javascript (with jQuery 1.9):</p>
  
  <pre><code>var id = 10000,
      coinArray = []
  
  function generateNextLine(type) {
      $('svg').append($(type()))
      return $('svg')[0]
  }
  
  function idNo() {
      id++
      return ((id-1)+"").substr(-4)
  }
  
  function random(x,y) {
      if (!y) {
          y=x
          x=0
      }
      x=parseInt(x)
      y=parseInt(y)
      return (Math.floor(Math.random()*(y-x+1))+x)
  }
  
  function coins() {
      coinArray[id%10000]=[]
      var gID = idNo(), x,
      g=$(document.createElement('g')).attr({
          id: gID,
          width: "100",
          height: "100%"
      })
      while (3&lt;=random(10)) {
          var randomPos=random(50,450)
          coinArray[(id-1)%10000][x] = randomPos
          $(g).append(
              $(document.createElement('circle'))
              .attr({
                  cx: "50",
                  cy: randomPos,
                  r: "50",
                  fill: "yellow"
              })
          )
          x++
      }
      return $(g)[0]
  }
  </code></pre>
  
  <p>When I run <code>generateNextLine(coins);</code>, the svg adds this element:</p>
  
  <pre><code>&lt;g id="0000" width="100" height="100%"&gt;
      &lt;circle cx="50" cy="90" r="50" fill="yellow"&gt;&lt;/circle&gt;
  &lt;/g&gt;
  </code></pre>
  
  <p>However, the actual display of the svg doesn't change. If I add this code directly to the svg, it renders as I would expect, but running my javascript function does not seem to do anything to the display. I am using Chrome 28, on OS X Lion.</p>