Search code examples
svg

Opposite of dominant-baseline in SVG?

Dominant baseline describes vertical position of text: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/dominant-baseline

I am looking for a horizontal version of this like this: enter image description here

Is that possible?

Solution

  • You need textPath pathLength and start-offset and text-anchor

    • Place your text on a textPath, set pathLength=100

    • startoffset and text-anchor take care of positioning

    • play with startoffset to add padding

    <svg viewbox="0 0 200 50">
  <path id="P" pathLength="100" d="M0 25h200" stroke="blue"/>
  <text>
    <textPath startoffset="0" text-anchor="start" 
              href="#P" dominant-baseline="middle">Left</textPath>
  </text>
  <text>
    <textPath startoffset="50" text-anchor="middle" 
              href="#P" dominant-baseline="middle">Middle</textPath>
  </text>
  <text>
    <textPath startoffset="100" text-anchor="end" 
              href="#P" dominant-baseline="middle">End</textPath>
  </text>
</svg>