显性基线在Firefox中不起作用

Question

考虑以下示例：

g {
  transform: translate(50px, 50px);
  dominant-baseline: central;
  text-anchor: middle;
}

<svg width="100" height="100">
  <g>
    <circle cx="0" cy="0" r="15" stroke="#000" fill="#ffffff" />
    <text x="0" y="0">A</text>
  </g>
</svg>

Chrome通过在中间垂直对齐文字来尊重dominant-baseline: central：

但是，Firefox似乎并不尊重dominant-baseline: central：

您如何解决此跨浏览器问题？

Answer 1

SVG 1.1 specification显性基线不是遗传属性。 SVG 2更改dominant-baseline is inherited之类的内容，但Firefox尚未实现SVG 2的这一部分。

在此期间，只需在文本元素上设置显性基线。

g {
  transform: translate(50px, 50px);
  text-anchor: middle;
}
text {
  dominant-baseline: middle;
}

<svg width="100" height="100">
  <g>
    <circle cx="0" cy="0" r="15" stroke="#000" fill="#ffffff" />
    <text x="0" y="0">A</text>
  </g>
</svg>