时间戳

首页 > 解决方案 > SVG按钮内的文本？

html - SVG按钮内的文本？

问题描述

我需要在 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>

标签： htmlcsssvg

解决方案

我使用路径#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>

推荐阅读