我遇到了与 SVG 相关的带圆圈文本的问题。我的目标是创建一条路径，允许我在上面书写，同时将文本居中，仍然跟踪我的路径 - 从圆圈的顶部开始。
Example
看起来就是这样 https://i.imgur.com/AtmrTUG.png（内图）
Problem
目前我正在使用 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>
我还尝试了 Raphael 库来管理它的工作，但说实话，我不能做我想做的事。这里有人真正设法让它发挥作用吗？或者有什么办法可以做到这一点吗？
将文本路径定义为要绘制的椭圆弧的完整上半球：
<path id="textPath" d="M 250 500 A 250,150 0 1 1 750,500" />
并设置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>
回复：评论一个绕圈子的解决方案：
要点是定义沿整个圆周延伸的文本路径，如下所示：
<?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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
