Jump to content

How to center text in an SVG graphic?

Recommended Posts

The following HTML creates an SVG rectangle containing a horizontal linear gradient and text, intended as a Banner.


Note that the text is not centered.

How do I center the text?

I tried the following, using some information on the web:

However, my attempt doesn't work:


Share this post

Link to post
Share on other sites

Go to the first link code and just adjust y position value and add text-anchor="middle"

        <text x="50%" y="60%" fill="white" font-size="45" font-family="Verdana" text-anchor="middle">THE NY TRIBUNE</text>


  • Like 1

Share this post

Link to post
Share on other sites

Thanks for this info. It works perfectly for the horizontal centering. However, vertically, it doesn't appear to be centered. Is there any way to center SVG text vertically? There doesn't appear to be an attribute of <text> for this. Is there a way to do it using JS? (eg: to return the height of the text (th) and the height of the banner (bh) and then do (bh - th)/2, for instance?)

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...