javascript - textPath 上的 SVG 圆圈文本(居中对齐)

Question

我遇到与 SVG 相关的带圆圈文本的问题。我的目标是创建一条路径，让我可以在上面书写，但也可以让文本居中，同时仍然跟踪我的路径 - 从圆圈的顶部开始。

示例

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>

我也试过 Raphael 库来管理它的工作，但说真的，我不能做我想做的事。这里有人真正设法让它发挥作用吗？或者有什么办法可以做到这一点？

Answer 1

将您的文本路径定义为您要绘制的椭圆弧的完整上半球:

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

并将 textPath 的 startOffset 设置为 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>