Align multiple elements in an SVG-container

Question

I'm trying to write an SVG-page where we have an icon and to its right a dynamic text (the distance between those two is fixed). The icon has a fixed width and height, but the text can vary in its width.

Both elements are surrounded by a group and they should be centred in there. The group also contains a free text that is also centred.

.-------------------------------------.
|                                     |
|             some text               |
|                                     |
|   .----.                            |
|   |    |  blah blah blah blah blah  |
|   `----´                            |
`-------------------------------------´

.-------------------------------------.
|                                     |
|             some text               |
|                                     |
|        .----.                       |
|        |    |  blah blah blah       |
|        `----´                       |
`-------------------------------------´

Anyone to admire my ASCII-skills? ;)

My approach would be to compile the icon and the text into one group and then centre that one into the parent group. The header text, too.

I read that I can centre texts in a group, but I didn't find a way to align images or actually groups.

<g id="MainGroup">      
  <text id="InfoText" x="90" y="0" width="320" text-anchor="middle" font-size="20" fill="#FFFFFF"/>
  <g x="90" y="0" width="320" text-anchor="middle">
    <image id="UserIcon" x="0" y="25" width="48" height="48"/>
    <text id="Username" x="58" y="55" font-size="22" fill="#FFFFFF"/>
  </g>    
</g>

How would I do this?

Note that I'm totally new to this SVG-stuff, so I might miss the obvious. If I missed some info you need, feel free to ask for it.

Answer 1

There's no alignment built into SVG. You would have to use the getBBox method via javascript to get the width of the item you want to centre and the width of the container and then do the centering yourself by setting the x attributes of the contained items.

Here's an example

<svg width="320" height="200" onload="go()">
<g id="MainGroup">
  <rect stroke="black" width="100%" height="100%" fill="none"/>
  <text id="InfoText" x="160" y="30" text-anchor="middle" font-size="20" fill="black">some text</text>
  <g id="SubGroup" text-anchor="left">
    <rect id="UserIcon" x="0" y="25" width="48" height="48" fill="red" />
    <text id="Username" x="50" y="55" font-size="22" fill="black">blah blah blah</text>
  </g>    
  <g id="SubGroup2" text-anchor="left">
    <rect id="UserIcon" x="0" y="25" width="48" height="48" fill="red" />
    <text id="Username" x="50" y="55" font-size="22" fill="black">blah blah blah blah blah</text>
  </g>    
</g>
<script>
  function centre(element, y) {
      element.setAttribute("transform",
                            "translate(" + (320 - element.getBBox().width) / 2 + ", " + y + ")");
  }
  function go() {
      centre(document.getElementById("SubGroup"), 30);
      centre(document.getElementById("SubGroup2"), 100);
  }
</script>
</svg>