SVGパスの中心にテキストを配置する方法

Question

SVGをレンダリングするために、私はjQuery SVGプラグインを使用しています。そして今、各パスとポリゴンにテキストを追加したいと思います。 jsFiddleには、生成されたマークアップがプラグインで表示されます。あなたはtextpathタグが存在していることを見ることができますが、それが表示されていないjsFiddle上のコードでは

var svgg = $("#rsr").svg('get'); 
var texts = svgg.createText(); 
svgg.textpath($("#Layer_x0020_1"),id, texts.string('We go '). 
    span('up', { dy: -30, fill: 'red' }).span(',', { dy: 30 }). 
    string(' then we go down, then up again')); 

：私は、次のコードを書いたテキストを作成するための

。 各パスの中央にテキストを追加するにはどうすればよいですか？
ありがとうございます。

Answer 1

：

http://jsfiddle.net/dYuAA/114/

それはちょうどテキストを配置するために、いくつかのJavaScriptを追加します。

function addText(p) 
{ 
    var t = document.createElementNS("http://www.w3.org/2000/svg", "text"); 
    var b = p.getBBox(); 
    t.setAttribute("transform", "translate(" + (b.x + b.width/2) + " " + (b.y + b.height/2) + ")"); 
    t.textContent = "a"; 
    t.setAttribute("fill", "red"); 
    t.setAttribute("font-size", "14"); 
    p.parentNode.insertBefore(t, p.nextSibling); 
} 

var paths = document.querySelectorAll("path"); 
for (var p in paths) 
{ 
    addText(paths[p]) 
} 

上記は、パス要素を調べるだけですが、必要なものを含めるようにセレクタを調整することもできます。

Answer 2

ここにいくつかの問題があります。

a）SVGは大文字と小文字が区別されるため、textPathでありテキストパスではありません。

B）textPathは

はここにあなたのjsFiddle fixed upだ有効であることが<text>要素で囲む必要があります。参照バウンディングボックスの真ん中に、形状の上に一直線にテキストを配置するには