javascript textPath 上的 SVG 带圆圈文本（居中对齐）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15495978/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
SVG Circled Text on textPath (center align)
提问by OldNurse
I got a problem with circled text related to SVG. My goal is to create path that will allow me to write on it but also center the text, still keeping track with my path - from the top part of the circle.
我遇到了与 SVG 相关的带圆圈文本的问题。我的目标是创建路径，让我可以在上面写字，但也可以使文本居中，同时仍然与我的路径保持一致——从圆圈的顶部开始。
Example
例子
That's what it looks like(image inside)
这就是它的样子（内图）
Problem
问题
Currently I'm using textPath + path combination to generate path and write on it.
目前我正在使用 textPath + path 组合来生成路径并在其上书写。
<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>
I also tried Raphael library to manage it work, but seriously I can't do what I want. Is here somebody who actually managed to make it work? Or is there any way to make it so?
我也尝试过 Raphael 库来管理它的工作，但严重的是我不能做我想做的。这里有人真正设法让它发挥作用吗？或者有什么办法可以做到这一点？
回答by collapsar
define your text path as the complete upper hemisphere of the elliptical arc you want to draw on:
将文本路径定义为要绘制的椭圆弧的完整上半球：
<path id="textPath" d="M 250 500 A 250,150 0 1 1 750,500" />
and set the startOffsetof your textPathto 50%. note that your svg file is not well-formed as it is lacking the namespace definition for xlink. the following is a working standalone example:
并将startOffset您的设置textPath为 50%。请注意，您的 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>
re: comment on a solution for going all teh way around the circle: the gist is to define the text path to extend along the whole circumference, like this:
回复：评论绕圈子的解决方案：要点是定义沿整个圆周延伸的文本路径，如下所示：
<?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>
