用SVG绘制内部带有曲线文本的圆形。

Question

用SVG绘制内部带有曲线文本的圆形。

4

我需要画一个像这样的带有两个曲线字符串的红圆:

上面的字符串总是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"

- MeetJoeBlack

...拿出他的放大镜 :) - Madness

1

你真的需要向我们展示你所尝试过的内容，以及你遇到的任何问题，这样我们才能帮助你解决这些问题。请参考提问的正确姿势页面，以获得更好的帮助。 - Madness

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paul LeBeau · Accepted Answer

为了让文字能够优雅地“悬挂”在一行上，目前最好的方法是使用半径较小的路径。虽然有一个属性可以调整文本的基线，但这并不可靠。

因此，您需要两个弧形：一个用于圆的下半部分，另一个半径较小，用于圆的上半部分。它们也都需要从左侧开始。这意味着其中一个将顺时针旋转，另一个将逆时针旋转。您可以使用弧形命令的“扫描”标志来控制它。

我们还需要使用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存在错误，导致文本在这些浏览器上无法正确居中。