0

I recently discovered the alignment-baseline and text-anchor styles for SVG Text Elements but, for some reason those attributes do not seem to work with SVG Path Elements.

I am hoping for some way to center the test text in the below example without using javascript to set the 'x' and 'y' values of the aforementioned text element.

<svg width="600" height="600">
  
  <!--   Ellipse -->
  <g transform="translate(120,140)">
    <ellipse cx="0" cy="0" rx="100" ry="50" stroke="#aaa" stroke-width="2" fill="#fff"></ellipse>
    <text x="0" y="0" alignment-baseline="middle" font-size="12" stroke-width="0" stroke="#000" text-anchor="middle">HueLink</text>
  </g>

<g>
  <path d="M250 250 L250 0 A250,250,0,0,1,466.50635094610965,124.99999999999997  L250 250 Z" fill="#ddd" stroke="#ddd"></path>
  <text style="font-size: 24px;" text-anchor="middle" alignment-baseline="middle" href="#p1">
test text
  </text>
  </g>
  
  
</svg>

[Edit]: Thanks @Gerarod Furtado for the clarification. My goal is to center the text on the shape rather than have the text follow the path like in @chrwahl's answer.

In conclusion it does seem that centering text on an svg path is impossible without javascript.

Michael Sorensen
  • 1,850
  • 12
  • 20
  • 2
    *"without using javascript"* should automatically eliminate the `d3.js` tag, shouldn't it? – Gerardo Furtado Sep 07 '21 at 03:12
  • 1
    Regarding your question: `alignment-baseline` and `text-anchor` work with text elements, not ellipses or paths. The difference in your examples is that in the first one the ellipse is inside a translated group, with `cy` and `cx` being zero, while in the second the centre of the group is just `(0, 0)`. So, just translate the group element containing the path to the desired position (which will be the centre), and draw the path *from that centre* on... that way, the text will be centralised. – Gerardo Furtado Sep 07 '21 at 03:16

1 Answers1

0

Here I have an example of <textPath> where the text-anchor is in the middle, the dominant-baseline is in the middle, and the startOffset is at 50% of the path. This will place the text in the middle.

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="300" height="300">
  <path id="p1" fill="none" stroke="red"
    d="M 10,50 C 40,40 50,30 60,30 S 70,40 90,50" />
  <text font-size="6">
    <textPath startOffset="50%" text-anchor="middle"
      dominant-baseline="middle" href="#p1">Text on path</textPath>
  </text>
</svg>

An alternative could be to use pathLength (here 2) on <path> and then adjust startOffset (here 1) on <textPath> according to that.

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="300" height="300">
  <path id="p1" fill="none" stroke="red" pathLength="2"
    d="M 10,50 C 40,40 50,30 60,30 S 70,40 90,50" />
  <text font-size="6">
    <textPath startOffset="1" text-anchor="middle"
      dominant-baseline="middle" href="#p1">Text on path</textPath>
  </text>
</svg>
chrwahl
  • 8,675
  • 2
  • 20
  • 30