html - 定位 svg 时浏览器的不同行为

Question

我正在尝试使 svg 彼此居中。我使用相同的方法将 div 和 svg 放置在彼此内部，但这只适用于 chrome。

以下代码用于居中:

  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: 100%;
  transform: translate(-50%, -50%);

这是它在 Firefox 中的样子:

可以查到代码here.

有人知道吗？

编辑:我发现发生了什么:Firefox 正在将转换应用于 svg 本身，从而将 svg 移出 View 框。还没有找到解决方案。

谢谢!

Answer 1

我现在找到了答案:

Firefox 将翻译级联到“use”标签上，因此 svg 在 vi​​ewbox 上的位置得到了翻译。为了解决这个问题，我添加了 css 规则:

use{
  transform: translate(50% 50%)
}

请随意添加关于为什么会发生这种情况的任何见解。