Javascript 在Chrome和Firefox的svg对象中水平对齐svg图像

我好像有点小问题。我试图渲染一个svg图像，使其水平对齐，但firefox和chrome的做法不同，我感到困惑

以下是我当前代码的几个示例：

• 铬：

• 火狐：

正如您所见，Chrome在大约

33x38

处渲染cat图标，而Firefox在

25x25

处渲染它

我目前正在使用javascript设置图标的

x

轴，这就是我目前所做的：

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));
 }

我的HTML如下所示：

<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>

<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>

---

有什么想法吗？谢谢你的帮助

我觉得你的定位逻辑相当复杂和混乱。另外，您不应该混合使用

getBoundingClientRect（）

和

getBBox（）

中的坐标。它们位于不同的坐标空间中

这和你想要的很接近吗

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；
setAttribute（“x”，（svgWidth-textWidth）/2-textX）；
text.setAttribute（“y”，130）；
setAttribute（“x”，（svgWidth-imageWidth）/2-imageX）；
image.setAttribute（“y”，30）
#svg0{
位置：绝对位置；
左：-9999px；
}

堆栈溢出
请创建一个工作片段或小提琴，这样我们就可以看到整个代码运行，而不是一点点。根svg节点可能不是与
一起使用的最佳目标。我猜FF和chrome不一样，而且有了这个enable background属性（如果chrome真的遵循规范，它们就不再遵循相同的规范）Hi。谢谢你的回答。不确定是否只有我，但猫图标仍然没有居中。。有点太对了，我的错。我忘了考虑边界框X坐标。不能只使用宽度而忽略X位置。