Question

我需要在里面画两条弯曲的红色圆圈：

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

UPDATE1： 我尝试使用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命令的“sweep”标志来控制它。

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

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

1 个答案: