CODEWITHSUNDEEP
htmlcsssvg
James Hammond
James Hammond

Reputation: 91

Text Inside an SVG Button?

I need to have text inside svg navigation buttons that will not affect the ability for the button to be used and will maintain the hover effects. The text also needs to follow the save curve as the button and be centered within the button. I have provided my HTML for reference.

The problem with my attempt is that it acts similar to placing absolute-positioned h or p elements over the svg path. It interrupts the functionality and hover events since it is another element.

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

Upvotes: 1

Views: 1130

Answers (1)

enxaneta
enxaneta

Reputation: 33044

I'm using the path #thisID as textPath reference. I'm using startOffset to change the starting position of the text along the path.

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

Upvotes: 2

Related Questions