Текст внутри кнопки SVG?

Question

Мне нужно иметь текст внутри навигационных кнопок SVG, который не повлияет на возможность использования кнопки и будет поддерживать эффекты при наведении.Текст также должен следовать кривой сохранения в качестве кнопки и быть центрирован внутри кнопки.Я предоставил мой HTML-код для справки.

Проблема с моей попыткой состоит в том, что она действует аналогично размещению элементов h или p в абсолютном положении по пути svg.Он прерывает функциональность и события наведения, поскольку это еще один элемент.

<svg viewbox="0 0 86 20" version="1.1" baseProfile="full" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <g>
    <path d="M 80 5 A 100 100 0 0 0 22.2 27.2 L 37.58 42.58 A 80 80 0 0 1 80 27.2 Z"></path>
    <text style="transform:rotate(-20deg);" x="0" y="40"><defs><path stroke="white" id="curve-text" d="M 0 15 A 80 80 0 0 1 80 27.2"></path></defs><textpath xlink:href="#curve-text" style="font-size:9pt;">Test</textpath></text>
  </g>
</svg>

Answer 1

Я использую путь #thisID в качестве ссылки textPath.Я использую startOffset, чтобы изменить начальную позицию текста вдоль пути.

<svg viewbox="0 0 86 20" version="1.1" baseProfile="full" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <g>
    <path id="thisID" d="M 80 5 A 100 100 0 0 0 22.2 27.2 L 37.58 42.58 A 80 80 0 0 1 80 27.2 Z"></path>
    <text fill="gold">
         <textPath xlink:href="#thisID" startOffset="63%" >
            <tspan dy="-6">test</tspan>
      </textPath>
    </text>
  </g>
</svg>