1

对于svg.js，我写了一个添加 textPath 功能的小插件。该插件非常简洁：

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

要在 MDN 上创建与此示例相同的输出，可以按如下方式使用插件：

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

这是动态版本的小提琴：http: //jsfiddle.net/wout/LNuWM/

但这是出错的地方，因为没有呈现文本。起初我认为我的代码有问题，但是当我从检查器复制 svg 输出并粘贴到 svg 文档中时，文本按预期呈现。

这里是静态版本的一个例子：http: //jsfiddle.net/wout/ZbM7K/

这是浏览器故障还是我错过了什么？

更新：现在已经解决了：http: //jsfiddle.net/wout/LNuWM/2/

4

1 回答 1

2

这似乎是 SVG.js 中的一个错误。由于添加了 XLink 命名空间，SVG 根元素变得混乱：

<svg style="position:relative;overflow:hidden;left:0px;top:0px;"xlink="http://www.w3.org/1999/xlink" ...
---------------------------------------------------------------^
|
--------this should read [SPACE]xmlns:xlink=
于 2013-07-19T11:00:41.797 回答