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
Post a Comment