svg 绘制带有弯曲文本的圆圈

Question

我需要像这样用两条弯曲的弦画红色圆圈:



上字符串总是 3 个字符的长度
下字符串可以是 1 到 20 个字符的长度

更新 1:
我尝试使用 textpath 和 circle 标签，但我认为我需要更改一些坐标:

    <svg xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink">
    
        <circle cx="40" cy="40" r="24" style="stroke:#006600; fill:none"/>
    	<defs>
            <path id="myTextPath"
                  d="M75,20
                     a1,1 0 0,0 150,0"
                    />
        </defs>
    
        <text x="5" y="50" style="stroke: #000000;">
          <textPath xlink:href="#myTextPath" >
                string
          </textPath>
        </text>
    	
    	
    </svg>

也不是很明白 <path> 'd' 属性，但我发现我可以将起点更改为 M10,20但是如何更改文本曲线方向？

d="M10,20 a1,1 0 0,0 150,0"

Answer 1

要使文本很好地“悬挂”在一行上，现在最好的方法是使用半径较小的路径。有一个属性可以调整文本的基线，但这并不可靠。

所以你需要两条弧线。一种用于圆的下半部分，另一种用于上半部分的半径较小。他们还需要从左边开始。这意味着一个将顺时针运行，另一个将逆时针运行。您可以使用 arc 命令的“扫描”标志来控制它。

我们还需要使用 startOffset="50%"和 text-anchor="middle"使文本在路径上居中。

<svg xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 0 80 80">
    <defs>
        <path id="tophalf" d="M26,40 a14,14 0 0,1 28,0" />
        <path id="lowerhalf" d="M16,40 a24,24 0 0,0 48,0" />
    </defs>

 
    <circle cx="40" cy="40" r="24" style="stroke:#006600; fill:none"/>
    <path d="M16,40 a24,24 0 0,0 48,0" style="stroke:#600; fill:none"/>
    
    <text x="5" y="50" style="stroke: #000000;"
          text-anchor="middle">
        <textPath xlink:href="#tophalf" startOffset="50%">str</textPath>
    </text>

    <text x="5" y="50" style="stroke: #000000;"
          text-anchor="middle">
        <textPath xlink:href="#lowerhalf" startOffset="50%">second st</textPath>
    </text>

</svg>

这在 FF 中工作正常，但不幸的是，现在 Chrome 和 IE 中似乎存在错误，导致文本无法在这些浏览器上正确居中。