`text-anchor` behaves incorrectly on <textPath>

[bbenguo]

My project uses jsvg to render the stamp. The arc-shaped text uses the Href property of TextPath to reference a Path, but the corresponding text layout is not done. The arc-shaped text is not visible on the page. Is there a plan to implement this feature?

[bbenguo]

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="48" fill="none" stroke="#d32f2f" stroke-width="4"/> <path id="arcPath" d="M 15 50 A 35 35 0 0 1 85 50" fill="none"/> <text font-size="7" fill="#d32f2f" text-anchor="middle"> <textPath href="#arcPath" startOffset="50%">珠宝玉石首饰检验集团有限公司</textPath> </text> <polygon points="50,30 55,45 70,45 58,55 63,70 50,60 37,70 42,55 30,45 45,45" fill="#d32f2f"/> <text x="50" y="78" font-size="9" fill="#d32f2f" text-anchor="middle">检验检测专用章</text> <text x="50" y="88" font-size="7" fill="#d32f2f" text-anchor="middle">(样章)</text> </svg>

[stanio]

Something with the <textPath startOffset="50%"> but then <text text-anchor="middle"> appears to affect the result, also. Here's with startOffset="0":

<svg width="400" height="400" viewBox="-50 -50 200 200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="48" fill="none" stroke="#d32f2f" stroke-width="4"/>
  <path id="arcPath" d="M 15 50 A 35 35 0 0 1 85 50" fill="none" stroke="blue"/>
  <text font-size="7" fill="#d32f2f" text-anchor="middle">
    <textPath href="#arcPath" startOffset="0">珠宝玉石首饰检验集团有限公司</textPath>
  </text>
  <polygon points="50,30 55,45 70,45 58,55 63,70 50,60 37,70 42,55 30,45 45,45" fill="#d32f2f"/>
  <text x="50" y="78" font-size="9" fill="#d32f2f" text-anchor="middle">检验检测专用章</text>
  <text x="50" y="88" font-size="7" fill="#d32f2f" text-anchor="middle">(样章)</text>
</svg>

Then text-anchor="start" and a fixed startOffset="5":

<svg width="400" height="400" viewBox="-50 -50 200 200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="48" fill="none" stroke="#d32f2f" stroke-width="4"/>
  <path id="arcPath" d="M 15 50 A 35 35 0 0 1 85 50" fill="none" stroke="blue"/>
  <text font-size="7" fill="#d32f2f" text-anchor="start">
    <textPath href="#arcPath" startOffset="5">珠宝玉石首饰检验集团有限公司</textPath>
  </text>
  <polygon points="50,30 55,45 70,45 58,55 63,70 50,60 37,70 42,55 30,45 45,45" fill="#d32f2f"/>
  <text x="50" y="78" font-size="9" fill="#d32f2f" text-anchor="middle">检验检测专用章</text>
  <text x="50" y="88" font-size="7" fill="#d32f2f" text-anchor="middle">(样章)</text>
</svg>

text-anchor="start" + startOffset="50%" results in no text on the path, as well. Possibly rendered off canvas, could it be 50% is treated relative to the viewport width or height?

[stanio]

textPath

• startOffset percentages

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 50">
    <style>svg { font-family: sans-serif; font-weight: bold }</style>
    <path id="text-path" d="M 15,15 c 40,0 20,20 70,20" fill="none" stroke="blue" stroke-width="0.25" stroke-opacity="0.25"/>
    <text font-size="7" fill="green" text-anchor="start">
      <textPath xlink:href="#text-path" startOffset="22.625%">Foo Bar Baz</textPath>
    </text>
  </svg>

  Actual	Expected

• text-anchor="middle"

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 50">
    <style>svg { font-family: sans-serif; font-weight: bold }</style>
    <path id="text-path" d="M 15,15 c 40,0 20,20 70,20" fill="none" stroke="blue" stroke-width="0.25" stroke-opacity="0.25"/>
    <text font-size="7" fill="green" text-anchor="middle">
      <textPath xlink:href="#text-path" startOffset="37.32">Foo Bar Baz</textPath>
    </text>
  </svg>

  Actual	Expected

• text-anchor="middle", startOffset="50%"

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 50">
    <style>svg { font-family: sans-serif; font-weight: bold }</style>
    <path id="text-path" d="M 15,15 c 40,0 20,20 70,20" fill="none" stroke="blue" stroke-width="0.25" stroke-opacity="0.25"/>
    <text font-size="7" fill="green" text-anchor="middle">
      <textPath xlink:href="#text-path" startOffset="50%">Foo Bar Baz</textPath>
    </text>
  </svg>

  Actual	Expected

[weisJ]

Thank you @stanio for the additional info. I knew that percentages with start offset have possibly weird behaviour (there even is a comment about it in the code 😅 ). The text-anchor="middle" issue is quite weird and I have to look into what's causing it.

[stanio]

The text-anchor="middle" issue is quite weird and I have to look into what's causing it.

Seems like the text is laid out as if text-anchor="start", then shifted/translated horizontally so the middle of the rendered text matches x-coordinate of the startOffset point:

text-anchor="start"	text-anchor="middle"

[weisJ]

I think I never actually implemented text-anchor for text on paths. For paths we need to do the shift before layout. Just have to compute the text metrics beforehand and make sure they actually align with what the layout algorithm produces for its width.