How to rotate text, textPath svg, html

<svg style="z-index: 0;" width="800" height="400" viewBox="1400 -1300 700 200">
  <g
    tabindex="0"
    role="button"
  >
    <defs>
      <marker
        id="red-arrowhead"
        viewBox="0 0 15 15"
        refX="3"
        refY="5"
        markerUnits="strokeWidth"
        markerWidth="6"
        markerHeight="6"
        orient="auto"
      >
        <path
          d="M 0 0.5 L 8 5 L 0 10 Z"
          stroke="grey"
          stroke-width="1"
          fill="grey"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </marker>
    </defs>
    <path
      d="M2002.7598312618293,-1234.5329730096134 C1731.0960939101396,-1234.5329730096134 1731.0960939101396,-1188.6076247061148 1459.4323565584502,-1188.6076247061148"
      stroke-width="20"
      stroke="transparent"
      fill="none"
      style="pointer-events: all;"
    ></path>
    <path
      id="text"
      d="M2002.7598312618293,-1234.5329730096134 C1731.0960939101396,-1234.5329730096134 1731.0960939101396,-1188.6076247061148 1459.4323565584502,-1188.6076247061148"
      stroke="grey"
      fill="transparent"
      marker-end="url(#red-arrowhead)"
      style="stroke-width: 6px; pointer-events: none;"
    ></path>
    <text dy="-10px" fill="black" font-size="14">
      <textPath
        startOffset="50%"
        text-anchor="center"
        href="#text"
      >
        text
      </textPath>
    </text>
  </g>
</svg>

I want text to be readable. How can I do it? I only need css solution. I tried rotateY, scale, matrix but unlucky

Solution

This version should work.

<svg style="z-index: 0;" width="800" height="400" viewBox="1400 -1300 700 200">
  <g
    tabindex="0"
    role="button"
  >
    <defs>
      <marker
        id="red-arrowhead"
        viewBox="0 0 15 15"
        refX="3"
        refY="5"
        markerUnits="strokeWidth"
        markerWidth="6"
        markerHeight="6"
        orient="auto"
      >
        <path
          d="M 0 0.5 L 8 5 L 0 10 Z"
          stroke="grey"
          stroke-width="1"
          fill="grey"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </marker>
    </defs>
    <path
      d="M2002.7598312618293,-1234.5329730096134 C1731.0960939101396,-1234.5329730096134 1731.0960939101396,-1188.6076247061148 1459.4323565584502,-1188.6076247061148"
      stroke-width="20"
      stroke="transparent"
      fill="none"
      style="pointer-events: all;"
    ></path>
    <path
      id="text"
      d="M2002.7598312618293,-1234.5329730096134 C1731.0960939101396,-1234.5329730096134 1731.0960939101396,-1188.6076247061148 1459.4323565584502,-1188.6076247061148"
      stroke="grey"
      fill="transparent"
      marker-end="url(#red-arrowhead)"
      style="stroke-width: 6px; pointer-events: none;"
    ></path>
      
     <text font-size="24" fill="black"  transform="rotate(180, 1731, -1211)">
      <textPath href="#text" startOffset="50%" text-anchor="middle">
        <tspan dy="-10" >Text</tspan>
      </textPath>
    </text>
    
  </g>
</svg>