title: Svg pattern not repeating when dynamically added
body: <p>I simply can't get pattern to repeat when I added it dynamically. Example is here:</p>
  
  <pre><code>var SVG_NS =  $('svg')[0].namespaceURI;
  
  pattern = document.createElementNS(SVG_NS,'pattern');
  pattern.setAttribute('id','test');
  pattern.setAttribute('patternunits','userSpaceOnUse');
  pattern.setAttribute('width','10');
  pattern.setAttribute('height','10');
  pattern.setAttribute('x','0');
  pattern.setAttribute('y','0');
  pattern.setAttribute('viewbox','0 0 10 10');
  
  path = document.createElementNS(SVG_NS,'rect');
  path.setAttribute('x','0');
  path.setAttribute('y','0');
  path.setAttribute('width','5');
  path.setAttribute('height','5');
  path.setAttribute('fill','lightblue');
  pattern.appendChild(path);
  path1 = document.createElementNS(SVG_NS,'rect');
  path1.setAttribute('x','5');
  path1.setAttribute('y','5');
  path1.setAttribute('width','5');
  path1.setAttribute('height','5');
  path1.setAttribute('fill','lightblue');
  pattern.appendChild(path1);
  
  var defs = $('svg')[0].querySelector('defs');
  defs.appendChild(pattern);
  $('svg path')[0].setAttribute('style','fill: url(#test);');
  </code></pre>
  
  <p><a href="http://jsfiddle.net/ubLr4/" rel="nofollow">http://jsfiddle.net/ubLr4/</a> . 
  It shows pattern, but it doesn't get repeated. Anyone has any ideas?</p>
  
  <p>If you copy paste generated SVG into file and run, it will display correctly or if you add predefined pattern dynamically it also shows ok.</p>