javascript - 在 Chrome 和 Firefox 的 svg 对象内水平对齐 svg 图像

Question

我好像有点问题。我正在尝试渲染 svg 图像以水平对齐，但 firefox 和 chrome 的处理方式不同，我感到很困惑。

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

• Chrome :

• 火狐:

如您所见，Chrome 以大约 33x38 渲染猫图标，而 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>

和我的#svg0 href 看起来像这样:

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

有什么想法吗？感谢您的帮助!

Answer 1

你的定位逻辑对我来说似乎相当复杂和困惑。此外，您不应混合来自 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;

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>