Aligning svg image horizontally within an svg object for both Chrome and Firefox

Question

I seem to have a little problem. I'm trying to render an svg image to align horizontally but both firefox and chrome are doing it differently and I'm getting confused.

Here are a couple examples with my current code:

• Chrome:

• Firefox:

As you can see Chrome renders the cat icon at about 33x38 while Firefox is rendering it at 25x25.

I'm currently setting the x axis of the icon using javascript, and this is what I have so far:

var svgBounds = element[0].getBoundingClientRect();
var groupBounds = angular.element(element[0]).children()[1].getBBox();
var image = group.children[0];
var text = group.children[1];
var imageWidth = image.getBoundingClientRect().width;

function text_icon_above() {
    trueGroup = groupBounds.width;
    groupPosX = (svgBounds.width - trueGroup) / 2;
    groupPosY = (svgBounds.height - groupBounds.height) / 2;
    text.setAttribute("y", 30);
    image.setAttribute("y", -70);
    image.setAttribute("x", (groupBounds.width / 2) - (imageWidth/2));
 }

with my HTML looking like this:

<svg height="100%" width="100%" position="{{font.family}}">
  <rect x="0" y="0" width="100%" height="100%" fill="#288feb"></rect>
  <g class="groupLayer">
      <use fill="#ffffff" style="display:block" xlink:href="#svg0" x="0" y="-40"/>
      <text fill="#ffffff" x="0" y="0" font-family="{{font.family}}" font-size="48"
>{{ctrl.text}}</text>
  </g>
</svg>

and my #svg0 href looks like this:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve" height="50px" width="50px" id="svg0"><path d="M53,34.2c-0.1,0-0.2,0-0.3,0c-0.2-0.4-0.6-0.6-1.1-0.6h-3.2c-0.5,0-0.9,0.2-1.1,0.6c-0.1,0-0.2,0-0.3,0  c-1.9,0-3.4,1.5-3.4,3.4c0,1.8,1.4,3.3,3.2,3.4c0.5,1.3,1.7,2.2,3.2,2.2c1.4,0,2.7-0.9,3.2-2.2c1.8-0.1,3.2-1.6,3.2-3.4  C56.4,35.7,54.9,34.2,53,34.2z M44.3,37.5c0-1.5,1.2-2.7,2.7-2.7c0,0,0.1,0,0.1,0c0,0,0,0,0,0c0,0.7,0.6,1.3,1.3,1.3h0.3V37  c0,0.6,0.4,1.1,0.9,1.3c-0.3,1.1-1.3,2-2.6,2C45.5,40.2,44.3,39,44.3,37.5z M50,42.4c-1,0-2-0.6-2.4-1.5c1.1-0.2,1.9-0.9,2.4-1.8  c0.5,0.9,1.4,1.6,2.4,1.8C52,41.8,51,42.4,50,42.4z M53,40.2c-1.2,0-2.3-0.8-2.6-2c0.5-0.2,0.9-0.7,0.9-1.3v-0.8h0.3  c0.7,0,1.3-0.6,1.3-1.3c0,0,0,0,0,0c0,0,0.1,0,0.1,0c1.5,0,2.7,1.2,2.7,2.7C55.7,39,54.5,40.2,53,40.2z M54,36.7  c0,0.2-0.2,0.4-0.4,0.4s-0.4-0.2-0.4-0.4s0.2-0.4,0.4-0.4S54,36.5,54,36.7z M52.7,38.1c0,0.2-0.2,0.4-0.4,0.4s-0.4-0.2-0.4-0.4  s0.2-0.4,0.4-0.4S52.7,37.9,52.7,38.1z M54.6,38.6c0,0.2-0.2,0.4-0.4,0.4c-0.2,0-0.4-0.2-0.4-0.4c0-0.2,0.2-0.4,0.4-0.4  C54.4,38.1,54.6,38.3,54.6,38.6z M46.4,36.3c0.2,0,0.4,0.2,0.4,0.4s-0.2,0.4-0.4,0.4S46,37,46,36.7S46.2,36.3,46.4,36.3z M47.8,37.7  c0.2,0,0.4,0.2,0.4,0.4s-0.2,0.4-0.4,0.4s-0.4-0.2-0.4-0.4S47.5,37.7,47.8,37.7z M45.8,38.1c0.2,0,0.4,0.2,0.4,0.4  c0,0.2-0.2,0.4-0.4,0.4s-0.4-0.2-0.4-0.4C45.4,38.3,45.6,38.1,45.8,38.1z M41.9,27.3c-1.7,0-3,1.4-3,3c0,1.7,1.4,3,3,3  c1.7,0,3-1.4,3-3C44.9,28.7,43.6,27.3,41.9,27.3z M42.7,30c-0.3,0-0.6-0.3-0.6-0.6c0-0.3,0.3-0.6,0.6-0.6c0.3,0,0.6,0.3,0.6,0.6  C43.3,29.7,43.1,30,42.7,30z M58.1,27.3c-1.7,0-3,1.4-3,3c0,1.7,1.4,3,3,3c1.7,0,3-1.4,3-3C61.1,28.7,59.8,27.3,58.1,27.3z M59.1,30  c-0.3,0-0.6-0.3-0.6-0.6c0-0.3,0.3-0.6,0.6-0.6c0.3,0,0.6,0.3,0.6,0.6C59.8,29.7,59.5,30,59.1,30z M80.1,38.7  c-2.2-4.4-5.5-8.2-9.4-11.3v-14c0-0.1,0-0.1,0-0.2c0-0.1,0-0.2-0.1-0.3c0-0.1-0.1-0.2-0.1-0.3c0-0.1-0.1-0.1-0.1-0.2  c-0.1-0.1-0.3-0.2-0.4-0.3c-0.2-0.1-0.3-0.1-0.5-0.1c-0.1,0-0.1,0-0.2,0c-0.1,0-0.2,0-0.3,0.1c-0.1,0-0.2,0.1-0.2,0.1  c0,0-0.1,0.1-0.1,0.1l-10.2,8.9c-2.5-0.6-5-0.9-8.2-0.9c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0-0.1,0c-2.2,0-5.2,0.5-7,0.8  c-0.3,0-0.6,0.1-0.9,0.1l-10.3-9c0,0-0.1-0.1-0.1-0.1c-0.1-0.1-0.2-0.1-0.3-0.1c0,0,0,0,0,0c-0.1,0-0.2-0.1-0.3-0.1c0,0,0,0,0,0  c-0.1,0-0.1,0-0.2,0c-0.2,0-0.4,0-0.5,0.1c-0.2,0.1-0.3,0.2-0.4,0.3c0,0.1-0.1,0.1-0.1,0.2h0c0,0,0,0,0,0c-0.1,0.1-0.1,0.2-0.1,0.3  c0,0.1-0.1,0.2-0.1,0.3c0,0.1,0,0.1,0,0.2v13.9c-4,3.1-7.4,7-9.7,11.5c-2.5,4.8-3.7,10-3.7,15.5c0,9,3.5,17.5,9.9,23.9  C32.5,84.5,41,88,50,88c9,0,17.5-3.5,23.9-9.9c6.4-6.4,9.9-14.9,9.9-23.9C83.8,48.8,82.5,43.5,80.1,38.7z M32.3,16.3l8.5,7.4  c0.2,0.2,0.4,0.3,0.6,0.3l0,0c0.3,0.1,0.6,0,2-0.2c0.5-0.1,1-0.2,1.6-0.2v3c0,0.7,0.6,1.3,1.3,1.3s1.3-0.6,1.3-1.3v-3.3  c0.4,0,0.7-0.1,1.1-0.1v3.4c0,0.7,0.6,1.3,1.3,1.3s1.3-0.6,1.3-1.3v-3.4c0.3,0,0.6,0,0.9,0v3.4c0,0.7,0.6,1.3,1.3,1.3  s1.3-0.6,1.3-1.3v-3.1c1.1,0.2,2.1,0.4,3.1,0.6c0.5,0.2,1,0.1,1.4-0.2l8.5-7.4v12.2c0,9.9-8,17.9-17.9,17.9c-9.9,0-17.9-8-17.9-17.9  V16.3z M79.1,65.2C74.7,77,63.3,85.3,50,85.3c-12.4,0-23.1-7.3-28.1-17.8c1.5,1.6,3.2,3.1,5,4.3c4.7,3.2,10.2,4.9,15.9,4.9  c5.5,0,10.8-1.6,15.4-4.6c4.5-2.9,8-7,10.2-11.8l0,0c1-2.1,3-3.4,5.3-3.4c3.2,0,5.9,2.6,5.9,5.9C79.6,63.6,79.3,64.6,79.1,65.2z   M73.7,54.3c-3.3,0-6.3,1.9-7.7,4.9l1.2,0.6L66,59.3c-4.2,9-13.3,14.8-23.2,14.8c-10.3,0-19.5-6.1-23.6-15.6  c-0.2-1.4-0.3-2.8-0.3-4.3c0-9.1,4-17.7,10.8-23.6c1,10.4,9.8,18.5,20.4,18.5c10.6,0,19.3-8,20.4-18.3c6.7,5.9,10.6,14.4,10.6,23.4  c0,1.4-0.1,2.7-0.3,4.1C79.3,55.9,76.7,54.3,73.7,54.3z"></path></svg>

Any ideas? Thanks for the help!

Answer 1

You positioning logic seems rather complicated and confusing to me. Also you shouldn't mix the coordinates from getBoundingClientRect() and getBBox(). They are in different coordinate spaces.

Is this something close to what you are after?

var mysvg = document.getElementById("mysvg");
var group = mysvg.getElementsByClassName("groupLayer")[0];

var groupBounds = group.getBBox();
var image = group.children[0];
var text = group.children[1];

var svgWidth = mysvg.getBBox().width;
var imageX = image.getBBox().x;
var imageWidth = image.getBBox().width;
var textX = text.getBBox().x;
var textWidth = text.getBBox().width;

text.setAttribute("x", (svgWidth - textWidth) / 2 - textX);
text.setAttribute("y", 130);

image.setAttribute("x", (svgWidth - imageWidth) / 2 - imageX);
image.setAttribute("y", 30);

#svg0 {
  position: absolute;
  left: -9999px;
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve" height="50px" width="50px" id="svg0"><path d="M53,34.2c-0.1,0-0.2,0-0.3,0c-0.2-0.4-0.6-0.6-1.1-0.6h-3.2c-0.5,0-0.9,0.2-1.1,0.6c-0.1,0-0.2,0-0.3,0  c-1.9,0-3.4,1.5-3.4,3.4c0,1.8,1.4,3.3,3.2,3.4c0.5,1.3,1.7,2.2,3.2,2.2c1.4,0,2.7-0.9,3.2-2.2c1.8-0.1,3.2-1.6,3.2-3.4  C56.4,35.7,54.9,34.2,53,34.2z M44.3,37.5c0-1.5,1.2-2.7,2.7-2.7c0,0,0.1,0,0.1,0c0,0,0,0,0,0c0,0.7,0.6,1.3,1.3,1.3h0.3V37  c0,0.6,0.4,1.1,0.9,1.3c-0.3,1.1-1.3,2-2.6,2C45.5,40.2,44.3,39,44.3,37.5z M50,42.4c-1,0-2-0.6-2.4-1.5c1.1-0.2,1.9-0.9,2.4-1.8  c0.5,0.9,1.4,1.6,2.4,1.8C52,41.8,51,42.4,50,42.4z M53,40.2c-1.2,0-2.3-0.8-2.6-2c0.5-0.2,0.9-0.7,0.9-1.3v-0.8h0.3  c0.7,0,1.3-0.6,1.3-1.3c0,0,0,0,0,0c0,0,0.1,0,0.1,0c1.5,0,2.7,1.2,2.7,2.7C55.7,39,54.5,40.2,53,40.2z M54,36.7  c0,0.2-0.2,0.4-0.4,0.4s-0.4-0.2-0.4-0.4s0.2-0.4,0.4-0.4S54,36.5,54,36.7z M52.7,38.1c0,0.2-0.2,0.4-0.4,0.4s-0.4-0.2-0.4-0.4  s0.2-0.4,0.4-0.4S52.7,37.9,52.7,38.1z M54.6,38.6c0,0.2-0.2,0.4-0.4,0.4c-0.2,0-0.4-0.2-0.4-0.4c0-0.2,0.2-0.4,0.4-0.4  C54.4,38.1,54.6,38.3,54.6,38.6z M46.4,36.3c0.2,0,0.4,0.2,0.4,0.4s-0.2,0.4-0.4,0.4S46,37,46,36.7S46.2,36.3,46.4,36.3z M47.8,37.7  c0.2,0,0.4,0.2,0.4,0.4s-0.2,0.4-0.4,0.4s-0.4-0.2-0.4-0.4S47.5,37.7,47.8,37.7z M45.8,38.1c0.2,0,0.4,0.2,0.4,0.4  c0,0.2-0.2,0.4-0.4,0.4s-0.4-0.2-0.4-0.4C45.4,38.3,45.6,38.1,45.8,38.1z M41.9,27.3c-1.7,0-3,1.4-3,3c0,1.7,1.4,3,3,3  c1.7,0,3-1.4,3-3C44.9,28.7,43.6,27.3,41.9,27.3z M42.7,30c-0.3,0-0.6-0.3-0.6-0.6c0-0.3,0.3-0.6,0.6-0.6c0.3,0,0.6,0.3,0.6,0.6  C43.3,29.7,43.1,30,42.7,30z M58.1,27.3c-1.7,0-3,1.4-3,3c0,1.7,1.4,3,3,3c1.7,0,3-1.4,3-3C61.1,28.7,59.8,27.3,58.1,27.3z M59.1,30  c-0.3,0-0.6-0.3-0.6-0.6c0-0.3,0.3-0.6,0.6-0.6c0.3,0,0.6,0.3,0.6,0.6C59.8,29.7,59.5,30,59.1,30z M80.1,38.7  c-2.2-4.4-5.5-8.2-9.4-11.3v-14c0-0.1,0-0.1,0-0.2c0-0.1,0-0.2-0.1-0.3c0-0.1-0.1-0.2-0.1-0.3c0-0.1-0.1-0.1-0.1-0.2  c-0.1-0.1-0.3-0.2-0.4-0.3c-0.2-0.1-0.3-0.1-0.5-0.1c-0.1,0-0.1,0-0.2,0c-0.1,0-0.2,0-0.3,0.1c-0.1,0-0.2,0.1-0.2,0.1  c0,0-0.1,0.1-0.1,0.1l-10.2,8.9c-2.5-0.6-5-0.9-8.2-0.9c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0-0.1,0c-2.2,0-5.2,0.5-7,0.8  c-0.3,0-0.6,0.1-0.9,0.1l-10.3-9c0,0-0.1-0.1-0.1-0.1c-0.1-0.1-0.2-0.1-0.3-0.1c0,0,0,0,0,0c-0.1,0-0.2-0.1-0.3-0.1c0,0,0,0,0,0  c-0.1,0-0.1,0-0.2,0c-0.2,0-0.4,0-0.5,0.1c-0.2,0.1-0.3,0.2-0.4,0.3c0,0.1-0.1,0.1-0.1,0.2h0c0,0,0,0,0,0c-0.1,0.1-0.1,0.2-0.1,0.3  c0,0.1-0.1,0.2-0.1,0.3c0,0.1,0,0.1,0,0.2v13.9c-4,3.1-7.4,7-9.7,11.5c-2.5,4.8-3.7,10-3.7,15.5c0,9,3.5,17.5,9.9,23.9  C32.5,84.5,41,88,50,88c9,0,17.5-3.5,23.9-9.9c6.4-6.4,9.9-14.9,9.9-23.9C83.8,48.8,82.5,43.5,80.1,38.7z M32.3,16.3l8.5,7.4  c0.2,0.2,0.4,0.3,0.6,0.3l0,0c0.3,0.1,0.6,0,2-0.2c0.5-0.1,1-0.2,1.6-0.2v3c0,0.7,0.6,1.3,1.3,1.3s1.3-0.6,1.3-1.3v-3.3  c0.4,0,0.7-0.1,1.1-0.1v3.4c0,0.7,0.6,1.3,1.3,1.3s1.3-0.6,1.3-1.3v-3.4c0.3,0,0.6,0,0.9,0v3.4c0,0.7,0.6,1.3,1.3,1.3  s1.3-0.6,1.3-1.3v-3.1c1.1,0.2,2.1,0.4,3.1,0.6c0.5,0.2,1,0.1,1.4-0.2l8.5-7.4v12.2c0,9.9-8,17.9-17.9,17.9c-9.9,0-17.9-8-17.9-17.9  V16.3z M79.1,65.2C74.7,77,63.3,85.3,50,85.3c-12.4,0-23.1-7.3-28.1-17.8c1.5,1.6,3.2,3.1,5,4.3c4.7,3.2,10.2,4.9,15.9,4.9  c5.5,0,10.8-1.6,15.4-4.6c4.5-2.9,8-7,10.2-11.8l0,0c1-2.1,3-3.4,5.3-3.4c3.2,0,5.9,2.6,5.9,5.9C79.6,63.6,79.3,64.6,79.1,65.2z   M73.7,54.3c-3.3,0-6.3,1.9-7.7,4.9l1.2,0.6L66,59.3c-4.2,9-13.3,14.8-23.2,14.8c-10.3,0-19.5-6.1-23.6-15.6  c-0.2-1.4-0.3-2.8-0.3-4.3c0-9.1,4-17.7,10.8-23.6c1,10.4,9.8,18.5,20.4,18.5c10.6,0,19.3-8,20.4-18.3c6.7,5.9,10.6,14.4,10.6,23.4  c0,1.4-0.1,2.7-0.3,4.1C79.3,55.9,76.7,54.3,73.7,54.3z"></path></svg>















<svg id="mysvg" height="100%" width="100%">
  <rect x="0" y="0" width="100%" height="100%" fill="#288feb"></rect>
  <g class="groupLayer">
      <use id="myuse" fill="#ffffff" style="display:block" xlink:href="#svg0" x="0" y="-40" />
      <text id="mytext" fill="#ffffff" x="0" y="0" font-size="48" >STACK OVERFLOW</text>
  </g>
</svg>