Last Updated: September 29, 2021
· jaketrent

Center text in SVG rect -- horz and vert

  • text element in a sibling to rect.
  • left side of text element positioned at horz center of rectangle and vertical center
  • text-anchor for centering text horizontally
  • alignment-baseline for centering vertically
<svg height="50" width="200">
  <rect fill="green" x="0" y="0" width="200" height="50"></rect>
  <text x="100" y="25" fill="red" text-anchor="middle" alignment-baseline="central">Christmas Time!</text>

see jsbin

1 Response
Add your response

This works on Chrome, fails on Firefox and IE.

Using dominant-baseline instead of alignment-baseline makes it also work on Firefox, still fails on IE.

over 1 year ago ·