如何將文本放置在svg路徑的中心

對於渲染SVG，我使用jQuery SVG插件。而且，現在我想爲每個路徑和多邊形添加文本。在jsFiddle你可以看到插件生成的標記。如何將文本放置在svg路徑的中心

創建文本我寫了下面的代碼：

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'));

在上jsFiddle的代碼，你可以看到textpath標籤存在，但它是不可見的。如何將文本添加到每個路徑的中心？
謝謝。

來源

2012-06-12 user1260827

你是什麼意思與「每條路徑的中心」？你的意思是你想要在形狀中間的文本，還是你希望文本集中在路徑本身，但仍然遵循路徑（以總路徑長度的50％爲中心）？ –

我想要在形狀中間的文字。 – user1260827

好的，那麼請更新/澄清你的問題。 –

要放置文本在形狀上頂部的直線，在boundingBox的看到中間：

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

上面只看看路徑元素，但是你可以調整選擇器以包含任何你需要的東西。

來源

2012-06-13 10:32:12

似乎jsfiddle的例子不再工作 –

現在應該工作 –

真棒謝謝！ –

這裏有幾個問題。

a）SVG區分大小寫，所以它是textPath而不是textpath。

B）textPath在一個<text>元素被包圍，以有效

這是你的jsFiddle fixed up。

來源

2012-06-12 09:38:54

'textpath'也可以正常工作。但是，Jquery SVG不會添加''元素和'xlink'。另外，我希望找到文本在中心。 – user1260827

xlink是可選的。 startOffset =「50」text-anchor =「middle」將居中。我用startOffset和text-anchor屬性更新了jsFiddle。 –

小提琴不起作用:-( – foobarbecue

如何將文本放置在svg路徑的中心

回答

相關問題