How to place and center text in an SVG rectangle

Question

I have the following rectangle      lt rect x  0px  y  0px  width  60px  height  20px   gt    I would like to center the word  Fiction  inside of it  For other rectangles  does svg word wrap to stay within them  I can t seem to find anything specifically about inserting text within shapes that are centered both horizontally and vertically and word wrap  Also  the text can not leave the rectangle   Looking at the http   www w3 org TR SVG text html TextElement example doesn t help since the text element s x and y are different from the rectangle s x and y  There doesn t seem to be width and height for text elements  I am not sure of the math here    My html table is just not going to work

User · Answer

For horizontal and vertical alignment of text in graphics, you might want to use the following CSS styles. In particular, note that dominant-baseline:middle is probably wrong, since this is (usually) half way between the top and the baseline, rather than half way between the top and the bottom. Also, some some sources (e.g. Mozilla) use dominant-baseline:hanging instead of dominant-baseline:text-before-edge. This is also probably wrong, since hanging is designed for Indic scripts. Of course, if you're using a mixture of Latin, Indic, ideographs or whatever, you'll probably need to read the documentation.

/* Horizontal alignment */
text.goesleft{text-anchor:end}
text.equalleftright{text-anchor:middle}
text.goesright{text-anchor:start}
/* Vertical alignment */
text.goesup{dominant-baseline:text-after-edge}
text.equalupdown{dominant-baseline:central}
text.goesdown{dominant-baseline:text-before-edge}
text.ruledpaper{dominant-baseline:alphabetic}

Edit: I've just noticed that Mozilla also uses dominant-baseline:baseline which is definitely wrong: it's not even a recognized value! I assume it's defaulting to the font default, which is alphabetic, so they got lucky.

More edit: Safari (11.1.2) understands text-before-edge but not text-after-edge. It also fails on ideographic. Great stuff, Apple. So you might be forced to use alphabetic and allow for descenders after all. Sorry.

User · Answer

The previous answers gave poor results when using rounded corners or stroke-width that s  1   For example  you would expect the following code to produce a rounded rectangle  but the corners are clipped by the parent svg component    x000D   x000D   lt svg width  200  height  100  gt  x000D     lt  --this rect should have rounded corners-- gt  x000D     lt rect x  0  y  0  rx  5  ry  5  width  200  height  100  stroke  red  stroke-width  10px  fill  white   gt  x000D     lt text x  50   y  50   alignment-baseline  middle  text-anchor  middle  gt CLIPPED BORDER lt  text gt      x000D   lt  svg gt  x000D   x000D   x000D    Instead  I recommend wrapping the text in a svg and then nesting that new svg and the rect together inside a g element  as in the following example    x000D   x000D   lt  --the outer svg here-- gt  x000D   lt svg width  400px  height  300px  gt  x000D   x000D     lt  --the rect text group-- gt  x000D     lt g transform  translate 50 50   gt  x000D       lt rect rx  5  ry  5  width  200  height  100  stroke  green  fill  none  stroke-width  10   gt  x000D       lt svg width  200px  height  100px  gt  x000D         lt text x  50   y  50   alignment-baseline  middle  text-anchor  middle  gt CORRECT BORDER lt  text gt        x000D       lt  svg gt  x000D     lt  g gt  x000D   x000D     lt  --rest of the image s code-- gt  x000D   lt  svg gt  x000D   x000D   x000D    This fixes the clipping problem that occurs in the answers above  I also translated the rect text group using the transform  translate x y   attribute to demonstrate that this provides a more intuitive approach to positioning the rect text on-screen

User · Answer

SVG 1 2 Tiny added text wrapping  but most implementations of SVG that you will find in the browser  with the exception of Opera  have not implemented this feature  It s typically up to you  the developer  to position text manually    The SVG 1 1 specification provides a good overview of this limitation  and the possible solutions to overcome it      Each    text    element causes a single   string of text to be rendered  SVG   performs no automatic line breaking or   word wrapping  To achieve the effect   of multiple lines of text  use one of   the following methods          The author or authoring package needs   to pre-compute the line breaks and use   multiple    text    elements  one for each   line of text      The author or authoring   package needs to pre-compute the line   breaks and use a single    text    element   with one or more    tspan    child   elements with appropriate values for   attributes    x        y        dx    and    dy    to   set new start positions for those   characters who start new lines     This approach allows user text   selection across multiple lines of   text -- see Text selection and   clipboard operations      Express the   text to be rendered in another XML   namespace such as XHTML  XHTML    embedded inline within a      foreignObject    element   Note  the   exact semantics of this approach are   not completely defined at this time        http   www w3 org TR SVG11 text html Introduction  As a primitive  text wrapping can be simulated by using the dy attribute and tspan elements  and as mentioned in the spec  some tools can automate this  For example  in Inkscape  select the shape you want  and the text you want  and use Text -  Flow into Frame  This will allow you to write your text  with wrapping  which will wrap based on the bounds of the shape  Also  make sure you follow these instructions to tell Inkscape to maintain compatibility with SVG 1 1  http   wiki inkscape org wiki index php FAQ What about flowed text 3F  Furthermore  there are some JavaScript libraries that can be used to dynamically automate text wrapping  http   www carto net papers svg textFlow   It s interesting to note CSVG s solution to wrapping a shape to a text element  e g  see their  button  example   although it s important to mention that their implementation is not usable in a browser  http   www csse monash edu au  clm csvg about html  I m mentioning this because I have developed a CSVG-inspired library that allows you to do similar things and does work in web browsers  although I haven t released it yet

User · Answer

An easy solution to center text horizontally and vertically in SVG    Set the position of the text to the absolute center of the element in which you want to center it    If it s the parent  you could just do x  50   y   50    If it s another element  x would be the x of that element   half its width  and similar for y but with the height    Use the text-anchor property to center the text horizontally with the value middle      middle      The rendered characters are aligned such that the geometric middle of the resulting rendered text is at the initial current text position   Use the dominant-baseline property to center the text vertically with the value middle  or depending on how you want it to look like  you may want to do central    Here is a simple demo    x000D   x000D   lt svg width  200  height  100  gt  x000D     lt rect x  0  y  0  width  200  height  100  stroke  red  stroke-width  3px  fill  white   gt  x000D     lt text x  50   y  50   dominant-baseline  middle  text-anchor  middle  gt TEXT lt  text gt      x000D   lt  svg gt  x000D   x000D   x000D

User · Answer

One way to insert text inside a rectangle is to insert a foreign object  wich is a DIV  inside rect object   This way  the text will respct the limits of the DIV    x000D   x000D  var g   d3 select  svg    x000D        x000D  g append  rect   x000D   attr  x   0  x000D   attr  y   0  x000D   attr  width   100    x000D   attr  height   100    x000D   attr  fill    000    x000D   x000D   x000D  var fo   g append  foreignObject   x000D    attr  width   100     x000D   x000D  fo append  xhtml div   x000D     attr  style   width 80  color  FFF margin-right  auto margin-left  auto margin-top 40px   x000D     text  Mussum Ipsum  cacilds vidis litro abertis Mussum Ipsum  cacilds vidis litro abertis Mussum Ipsum  cacilds vidis litro abertis    x000D   lt script src  https   cdnjs cloudflare com ajax libs d3 4 9 1 d3 js  gt  lt  script gt  x000D   lt svg width  200  height  200  gt  lt  svg gt  x000D   x000D   x000D

User · Answer

You can directly use text-anchor    middle  property  I advise to create a wrapper svg element over your rectangle and  text  That way you can use the whole element using one css selector  Make sure you place  x  and  y  property of text as 50     x000D   x000D       lt svg class  svg-rect  width  50  height  40  gt  x000D           lt rect x  0  y  0  rx  3  ry  3  width  50  height  40  fill   e7e7e7  gt  lt  rect gt  x000D           lt text x  50   y  50   text-anchor  middle  stroke  black  stroke-width  1px  dy   3em  gt N A lt  text gt  x000D       lt  svg gt  x000D   x000D   x000D

User · Answer

alignment-baseline is not the right attribute to use here  The correct answer is to use a combination of dominant-baseline  central  and text-anchor  middle     x000D   x000D   lt svg width  200  height  100  gt  x000D       lt g gt  x000D           lt rect x  0  y  0  width  200  height  100  style  stroke red  stroke-width 3px  fill white    gt  x000D           lt text x  50   y  50   style  dominant-baseline central  text-anchor middle  font-size 40px   gt TEXT lt  text gt  x000D       lt  g gt  x000D   lt  svg gt  x000D   x000D   x000D

User · Answer

I had a bugger of a time getting anything centered using SVG  so I rolled my own little function   hopefully it should help you  Note that it only works for SVG elements   function centerinparent element      only works for SVG elements     var bbox   element getBBox        var parentwidth   element parentNode width baseVal value      var parentheight   element parentNode height baseVal value      var newwidth     parentwidth   2  -  bbox width   2   - 2    i start everything off by 2 to account for line thickness     var newheight     parentheight   2  -  bbox height   2   - 2        need to adjust for line thickness        if  element classList contains  textclass        text is origined from bottom left  whereas everything else origin is top left         newheight    bbox height    move it down by its height            element setAttributeNS null   transform    translate     newwidth         newheight                console log  centering BOXES   between width   element parentNode width baseVal value       height   parentheight          console log bbox

User · Answer

If you are creating the SVG programmatically you can simplify it and do something like this      lt g gt         lt rect x  x  y  y  width  width  height  height    gt         lt text           x  x   width   2            y  y   height   2            dominant-baseline  middle            text-anchor  middle         gt             label         lt  text gt     lt  g gt

User · Answer

Full Detail Blog  http   blog techhysahil com svg how-to-center-text-in-svg-shapes   x000D   x000D   lt svg width  600  height  600  gt  x000D     lt  --   Circle -- gt  x000D     lt g transform  translate 50 40   gt  x000D       lt circle cx  0  cy  0  r  35  stroke   aaa  stroke-width  2  fill   fff  gt  lt  circle gt  x000D       lt text x  0  y  0  alignment-baseline  middle  font-size  12  stroke-width  0  stroke   000  text-anchor  middle  gt HueLink lt  text gt  x000D     lt  g gt  x000D     x000D     lt  --   In Rectangle text position needs to be given half of width and height of rectangle respectively -- gt  x000D     lt  --   Rectangle -- gt  x000D     lt g transform  translate 150 20   gt  x000D       lt rect width  150  height  40  stroke   aaa  stroke-width  2  fill   fff  gt  lt  rect gt  x000D       lt text x  75  y  20  alignment-baseline  middle  font-size  12  stroke-width  0  stroke   000  text-anchor  middle  gt HueLink lt  text gt  x000D     lt  g gt  x000D     x000D     lt  --   Rectangle -- gt  x000D     lt g transform  translate 120 140   gt  x000D       lt ellipse cx  0  cy  0  rx  100  ry  50  stroke   aaa  stroke-width  2  fill   fff  gt  lt  ellipse gt  x000D       lt text x  0  y  0  alignment-baseline  middle  font-size  12  stroke-width  0  stroke   000  text-anchor  middle  gt HueLink lt  text gt  x000D     lt  g gt  x000D     x000D     x000D   lt  svg gt  x000D   x000D   x000D

[text] How to place and center text in an SVG rectangle

Examples related to text

Examples related to svg