如何将文本放置在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路径的中心

回答

相关问题