2013-03-19 131 views
5

我遇到了与SVG相关的圆圈文本问题。我的目标是创建一条可以让我写作的路径,但也可以将文本居中,仍然跟踪我的路径 - 从圆圈的顶部。SVG在textPath上的带圆圈的文本(中心对齐)

That's what it looks like(图像内)

问题

目前我使用textPath +路径组合以生成路径并在其上写。

<svg> 
<defs> 
<path id="textPath" d="M 200 175 A 25 25 0 0 0 182.322 217.678" /> 
</defs> 
<text x="25" y="0"><textPath xlink:href="#textPath" startOffset="0" >here goes my text</textPath></text> 
</svg> 

我也试过拉斐尔图书馆管理它的工作,但认真我不能做我想做的事。这里有人真正设法使它工作吗?或者有什么办法可以做到这一点?

回答

14

定义的文本路径,只要你想上绘制椭圆弧的完整的上半球:

<path id="textPath" d="M 250 500 A 250,150 0 1 1 750,500" /> 

,并设置你的textPath〜50%startOffset。请注意,您的svg文件格式不正确,因为它缺少xlink的命名空间定义。下面是一个独立工作例如:

<?xml version="1.0" encoding="utf-8"?> 
<!-- SO: http://stackoverflow.com/questions/15495978/svg-circled-text-on-textpath-center-align --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xhtml="http://www.w3.org/1999/xhtml" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    version="1.1" 
    width="20cm" height="20cm" 
    viewBox="0 0 1000 1000" 
    preserveAspectRatio="xMinYMin" 
    style="background-color:white; border: solid 1px black;" 
> 
<defs> 
<path id="textPath" d="M 250 500 A 250,150 0 1 1 750,500"/> 
</defs> 
<text x="0" y="0" text-anchor="middle" style="font-size:30pt;"><textPath xlink:href="#textPath" startOffset="50%" >here goes my text</textPath></text> 
</svg> 

重: 要点是定义文本路径沿着整个圆周延伸,像这样的:上全力以赴德路绕了一圈的解决方案评论

<?xml version="1.0" encoding="utf-8"?> 
<!-- SO: http://stackoverflow.com/questions/15495978/svg-circled-text-on-textpath-center-align --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xhtml="http://www.w3.org/1999/xhtml" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    version="1.1" 
    width="20cm" height="20cm" 
    viewBox="0 0 1000 1000" 
    preserveAspectRatio="xMinYMin" 
    style="background-color:white; border: solid 1px black;" 
> 
<defs> 
<path id="textPath" d="M 250 500 A 250,250 0 1 1 250 500.0001"/> 
</defs> 
<text x="0" y="0" text-anchor="middle" style="font-size:30pt;"><textPath xlink:href="#textPath" startOffset="50%" >this is a merry-go-round of all my text wrapped around a circle, a vbery big one</textPath></text> 
</svg> 
+1

_定义您的文本路径为您要绘制的椭圆弧的完整上半球:_如果我需要完整的圆圈写入,该怎么办?然后怎样呢? – OldNurse 2013-03-19 10:21:28