Почему я не могу сделать это тегом в изогнутой линии?

Question

Я пытаюсь сделать в изогнутой ссылке два разных типа шрифтов, но это невозможно, потому что я не могу сделать это тегом здесь. Есть ли решение, как это сделать?

<svg viewBox="0 0 500 500">
  <path id="curve" fill="transparent" d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97" />
  <text width="500">
    <textPath xlink:href="#curve">
      Im trying make it with span <span>THIS</span>
    </textPath>
  </text>
</svg>

Answer 1

Вам необходимо использовать элемент SVG <tspan>, а не элемент HTML <span>.

<svg viewBox="0 0 500 500">
  <path id="curve" fill="transparent" d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97" />
  <text width="500">
    <textPath xlink:href="#curve">
      Im trying make it with span <tspan font-family="sans-serif">THIS</tspan>
    </textPath>
  </text>
</svg>