SVG按钮内的文字？

Question

我需要在svg导航按钮中包含文本，这些文本不会影响按钮的使用能力并保持悬停效果。 文本还需要遵循保存曲线作为按钮，并在按钮内居中。 我提供了HTML供参考。

我的尝试的问题在于它的行为类似于在svg路径上放置绝对定位的h或p元素。 由于它是另一个元素，因此会中断功能和悬停事件。

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