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>

SVG按钮内的文字？

1 个答案: