SVG center text

Question

I have the following:

<html>
  <svg height="500" width="500">
    <g id="avg-items">
    <rect
       ry="12.284702"
       rx="14.016526"
       y="186.2337"
       x="355.86771"
       height="96.626312"
       width="140.22598"
       id="basket-label"
       style="display:inline;opacity:0.76999996;fill:#ff0000;stroke:none" >
    </rect>     
    <text
      id="avg-item-num"
      text-anchor="middle">8</text>
  </g>
 </svg>
</html>

According to this, my text should be centered in the rect. But that is not the case. Any tips are appreciated! Thanks!

As per comment, I tried the following:

<html>
<svg height="500" width="500">
    <g id="avg-items">
    <rect
       height="96.626312"
       width="140.22598"
       id="basket-label"
       style="display:inline;opacity:0.76999996;fill:#ff0000;stroke:none">
    </rect>     
    <text
      id="avg-item-num"
      text-anchor="middle">8</text>
  </g>
 </svg>
</html>

But it still was not centered.

I tried removing them as suggested and I still cannot get it to center. — ProgrammedChem, Oct 01 '15 at 18:02
The rect must be centred on the origin if it is to match the text which has no x/y and therefore sits at 0, 0 — Robert Longson, Oct 01 '15 at 18:13

Robert Longson · Accepted Answer · 2015-10-01T18:14:59.667

1

You must draw your rect centred on the origin if you aren't going to supply and x/y values for the text. I've roughly divided the width/height by 2 and made them negative to show that below.

  <svg height="500" width="500" viewBox="-70 -48 500 500">
    <g id="avg-items">
    <rect
       ry="12.284702"
       rx="14.016526"
       x = "-70"
       y = "-48"
       height="96.626312"
       width="140.22598"
       id="basket-label"
       style="display:inline;opacity:0.76999996;fill:#ff0000;stroke:none" >
    </rect>     
    <text
      id="avg-item-num"
      text-anchor="middle">8</text>
  </g>

edited Oct 01 '15 at 18:14

answered Oct 01 '15 at 18:05

Robert Longson

118,664
26
252
242

wow cool! let's say I want to move this rectangle not to be centered around origin, is this possible? – ProgrammedChem Oct 01 '15 at 18:08
Adjust the x/y Whatever you add to the x/y of the rect, do the same to the x/y of the text element. Alternatively set a translate transform on the `` element as the other question does. – Robert Longson Oct 01 '15 at 18:18

SVG center text

1 Answers1