2013-07-19 4 views
1

Для svg.js Я написал небольшой плагин, добавляющий функциональность textPath. Плагин очень краткий:SVG textPath не рендеринг при сгенерированном JavaScript

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

Чтобы создать такой же вывод, как this example on 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/

Это браузер глюк или я что-то отсутствует?

UPDATE: Это теперь было решено: http://jsfiddle.net/wout/LNuWM/2/

ответ

2

Это, кажется, ошибка в SVG.js. Корневой элемент SVG перепутался из-за добавления пространства имен XLink:

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

Спасибо, что решил проблему. – wout

+0

Добро пожаловать! Могу я спросить, как вы его исправили? – Boldewyn

+1

Как оказалось, это было сочетание двух ошибок, как с неправильным использованием пространств имен. Объявление xlink в svg.js было установлено ссылкой на этот 'attr ('xmlns: xlink', SVG.xlink, SVG.ns)' вместо 'attr ('xlink', SVG.xlink, SVG.ns)', который очевидно, правильный путь. Кроме того, атрибут 'xlink: href' в textPath был задан с помощью' setAttribute' вместо 'setAttributeNS', поэтому я изменил это' attr ('xlink: href', '#' + this.track) 'to' attr ('href', '#' + this.track, SVG.xlink) '. Это сделал трюк. Реализация textPath теперь является частью svg.js: http://jsfiddle.net/wout/yfGjF/ – wout

Смежные вопросы