Как сделать текст горизонтально textPath?

Question

[szQocks]

https://codepen.io/kapysta-xxl/pen/MWrgWGg

Есть у кого-нибудь идеи о том как сделать текст горизонтально, линия может меняться, быть под разным углом. Несколько часов мучаюсь не могу сделать, надеюсь на вашу помощь.

Answer 1

[AvengerAnubis]

<svg viewBox="0 0 500 500">

  <path id="MyPath" fill="none" stroke="red"
        d="M 10,10 L 150,100" />
  
  <text rotate="330">
    <textPath href="#MyPath" startOffset="50%">
      <tspan dy="10 -5 -3 -3 -3">Quick</tspan>
    </textPath>
  </text>

</svg>

Не совсем то, что нужно, скорее всего. Это всё что я смог сделать исходя из инфы из инета, т.к. сам я SVG не изучал

Comments

[szQocks]

Cпасибо за попытку помочь.

[AvengerAnubis]

<svg viewBox="0 0 500 500">

  <path id="MyPath" fill="none" stroke="red"
        d="M 10,10 L 150,100" />
  
  <text text-anchor="middle" x="80" y="60"> 
      Quick
  </text>

</svg>

Это ближе. Но textPath не используется

[szQocks]

AvengerAnubis, не то)

[AvengerAnubis]

szQocks, Тогда не знаю, извини

Answer 2

[WinRaR4]

Костыль через горизонтальный второй path:

<svg viewBox="0 0 500 500">

  <path id="MyPath" fill="none" stroke="red"
        d="M 10,10 L 150,100" />
  <path id="MyPath2" d="M 10,55 L 150,55" />
  
  <text>
    <textPath href="#MyPath2" startOffset="50%">
      Quick
    </textPath>
  </text>

</svg>

Comments

[szQocks]

Не то, текст должен быть по середине линии, но быть всегда горизонтально в не зависимости под каким углом будет линия. Если бы мне нужен был тупо текст который бы был по середине я бы не использовал textPath. Но спасибо за попытоку.