How to make text horizontal textPath?

Question

JavaScript

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

Does anyone have any ideas on how to make the text horizontal, the line can change, be at different angles. I've been struggling for several hours, I can't do it, I hope for your help.

Answer 1

<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>

Not quite what you need, most likely. This is all that I could do based on information from the Internet, tk. I didn't learn SVG myself.

Answer 2

Crutch through the horizontal second 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>