显性基线在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规范中,显性基线不是继承属性.SVG 2改变了主导基线被继承的东西,但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>