定位svgs

Question

我试图将svgs集中在彼此之上。我使用相同的方法将div和svgs放在彼此内部，但这只适用于chrome。

以下代码用于居中：

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

这就是它在Firefox中的样子：

可以找到代码here.

有人有线索吗？

编辑：我发现了正在发生的事情：Firefox正在将变换应用于svg本身，从而将svg移出视图框。尚未找到解决方案。

谢谢！

Answer 1

我现在找到了答案：

Firefox将转换级联到“use”标记，因此svg在viewbox上的位置被翻译。为了抵消这种情况，我添加了css规则：

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

随意添加有关为何发生这种情况的任何见解。