title: SVG textPath not rendering when generated by JavaScript
body: <p>For <a href="http://svgjs.com/" rel="nofollow">svg.js</a> I wrote a little plugin adding textPath functionality. The plugin is very concise:</p>
  
  <pre><code>// textpath plugin
  SVG.TextPath = function() {
      this.constructor.call(this, SVG.create('textPath'))
  }
  SVG.TextPath.prototype = new SVG.Element
  SVG.extend(SVG.TextPath, {
      text: function(text) {
          while (this.node.firstChild) this.node.removeChild(this.node.firstChild)
          this.node.appendChild(document.createTextNode(text))
          return this
      }
  })
  SVG.extend(SVG.Text, {
      path: function(d){
          var textPath = new SVG.TextPath().text(this.content)
  
          while (this.node.firstChild) this.node.removeChild(this.node.firstChild)
  
          this.track = this.doc().defs().path(d)
          this.node.appendChild(textPath.node)
          textPath.attr('xlink:href', '#' + this.track)
  
          return this
      }
  })
  </code></pre>
  
  <p>To create the same output as <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath" rel="nofollow">this example on MDN</a>, the plugin can be used as follows:</p>
  
  <pre><code>// example usage
  var draw = SVG('canvas').viewbox(0, 0, 1000, 300)
  
  var text = draw.text('We go up, then we go down, then up again')
  text.font({ size: 42.5, family: 'Verdana' })
  text.path('M 100 200 C 200 100 300  0 400 100 C 500 200 600 300 700 200 C 800 100 900 100     900 100')
  
  draw.use(text.track).attr({ fill: 'none', 'stroke-width': 1, stroke: '#f09' })
  </code></pre>
  
  <p>Here is a fiddle of the dynamic version:
  <a href="http://jsfiddle.net/wout/LNuWM/" rel="nofollow">http://jsfiddle.net/wout/LNuWM/</a> </p>
  
  <p>But this is where it goes wrong because the text is not rendered. At first I thought something was wrong with my code but when I copied the svg output from the inspector and pasted in a svg document, the text is rendered as expected.</p>
  
  <p>Here an example of the static version:
  <a href="http://jsfiddle.net/wout/ZbM7K/" rel="nofollow">http://jsfiddle.net/wout/ZbM7K/</a></p>
  
  <p>Is this a browser glitch or am I missing something?</p>
  
  <p>UPDATE:
  This has now been resolved:
  <a href="http://jsfiddle.net/wout/LNuWM/2/" rel="nofollow">http://jsfiddle.net/wout/LNuWM/2/</a></p>