a9nkrw
Last Updated: November 21, 2017
·
23.88K
· jaketrent
Jaketrent

Center text in SVG rect -- horz and vert

svg
  • 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>
</svg>

see jsbin

Say Thanks
Respond

1 Response
Add your response

28300

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 ·