SVG textPath not rendering when generated by JavaScript -


for svg.js wrote little plugin adding textpath functionality. plugin concise:

// 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     } }) 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     } }) 

to create same output this example on mdn, plugin can used follows:

// example usage var draw = svg('canvas').viewbox(0, 0, 1000, 300)  var text = draw.text('we go up, go down, 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' }) 

here fiddle of dynamic version: http://jsfiddle.net/wout/lnuwm/

but goes wrong because text not rendered. @ first thought wrong code when copied svg output inspector , pasted in svg document, text rendered expected.

here example of static version: http://jsfiddle.net/wout/zbm7k/

is browser glitch or missing something?

update: has been resolved: http://jsfiddle.net/wout/lnuwm/2/

this seems error in svg.js. svg root element gets messed because of adding xlink namespace:

<svg style="position:relative;overflow:hidden;left:0px;top:0px;"xlink="http://www.w3.org/1999/xlink" ... ---------------------------------------------------------------^ | --------this should read [space]xmlns:xlink= 

Comments