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>