半圆元素上的 SVG 文本路径方向变化

Question

我试图让 SVG 内部的文本路径跟随半圆，但我无法让它从正确的点开始。

在我的项目中是这样实现的

<svg viewBox="0 0 500 500">
  <path fill="transparent" id="curve" d=" M 400 0 A 200 197 0 1 1 400 -7" />
  <text x="6" width="500">
    <a href='https://google.com'><textPath href="#curve">
      Test text direction
      </textPath></a>
  </text>
</svg>

请查看此图片 https://ibb.co/cv6vWZG 以查看我尝试获取的内容和我正在获取的内容。白色文字是我要找的，黑色文字是我要找的

Answer 1

文本-测试文本方向位于path所指向的公式中从头开始的曲线上M(move) 命令。要更改文本位置的起点，您需要交换曲线的 beginning 和 end。

它是：

d=" M 400 0 A 200 197 0 1 1 400 -7"

变成了：

d=" M 0 0 A 200 200 0 0 0 400 0"

<tspan dy="-5"调整文字与曲线的距离

<svg viewBox="0 0 500 500">
            <path fill="transparent" stroke="black" id="curve" d=" M 0 0 A 200 200 0 0 0 400 0" />
      <a href='https://google.com'>
            <text x="6"  >
            <textPath   xlink:href="#curve">
                  <tspan dy="-5">Test text direction </tspan>
                </textPath>
        </text> 
      </a>
</svg>

从曲线开始调整文本位置 - startOffset="40%"

<svg viewBox="0 0 500 500">
            <path fill="transparent" stroke="black" id="curve" d=" M 0 0 A 200 200 0 0 0 400 0" />
      <a href='https://google.com'>
            <text x="6"  >
                <textPath   xlink:href="#curve" startOffset="40%">
                  <tspan dy="-5">Test text direction </tspan>
                </textPath>
            </text> 
      </a>
</svg>

更新

Is there a better way to center the text to center of the curve than guess 40% ?

添加startOffset="50%"text-anchor="middle"

<svg viewBox="0 0 500 500">
            <path fill="transparent" stroke="black" id="curve" d=" M 0 0 A 200 200 0 0 0 400 0" />
      <a href='https://google.com'>
            <text x="6"  >
                <textPath   xlink:href="#curve" startOffset="50%"  text-anchor="middle" >
                  <tspan dy="-5">Test text direction </tspan>
                </textPath>
            </text> 
      </a>
</svg>

半圆元素上的 SVG 文本路径方向变化

SVG text-path direction change on a half circle element

css

reactjs

svg

text

path

更新