SVG：文本在FF和Chrome中的居中位置不同

Question

我有以下SVG内容

<svg height="64" width="64" class="ng-star-inserted">
  <rect rx="10" ry="10" style="fill:silver;stroke:black;stroke-width:5;opacity:0.5" x="0" y="0" height="64" width="64">
  </rect>
  <text alignment-baseline="middle" text-anchor="middle" x="50%" y="50%">
 missing 
  </text>
</svg>

实际上是一个带有一些文本的灰色框。文字应居中-垂直和水平居中。我将整个内容放置在输入字段（类型file）旁边的Bootstrap 4结构中。但是，根据浏览器的不同，SVG中文本中心的计算方式似乎有所不同。

整个代码如下：

<li class="media">
  <div class="mr-3">
    <svg height="64" width="64" class="ng-star-inserted">
      <rect rx="10" ry="10" style="fill:silver;stroke:black;stroke-width:5;opacity:0.5" x="0" y="0" height="64" width="64">
      </rect>
      <text alignment-baseline="middle" text-anchor="middle" x="50%" y="50%">
     missing 
      </text>
    </svg>
  </div>
  <div class="media-body">
    <h5 class="mt-0 mb-1">{{getLabel()}}</h5>
    <input class="form-control-file" type="file" type="file" >
  </div>
</li>

如图所示，文本missing位于左侧（FF）的正上方。我可以将50%的中心对齐方式更改为32px，这对于Chrome来说是完美的，但是对于FF，它应该是34px。我猜想FF开始为x计算整个行高，而不是图像开始。

将alignment-baseline="middle"更改为center，hanging baseline也不能解决问题。

有没有一种方法可以修复它，使其在两种浏览器中都能正常工作？

Answer 1

添加dominant-baseline="middle"并按以下方式编辑代码：

 <text alignment-baseline="middle" dominant-baseline="middle" text- 
    anchor="middle" x="50%" y="50%">
     missing 
 </text>

Link to documenttion

这是我在Chrome和Firefox中测试过的codepen snippet。