SVG 在 Firefox 和 Edge 上显示不同

Question

我在处理中间有数字的 svg 图像时遇到了一些问题。使用 Chrome 和其他浏览器时显示正确，但在 Firefox 和 Edge 中，数字位置错误。 Link

这是我的代码。

#maindiv {
  position: relative;
  width: 50px;
  height: 50px;
}
.number {
  font-family: initial;
  font-size: 2.5em;
  font-weight: 700;
  text-align: center;
}

<div id="maindiv" class="" style="">
<svg viewBox="0 -10 50 90" enable-background="new 0 0 50 50">
  <defs>
    <!-- Background image for the svg -->
    <pattern id="image_594121ec06330" patternUnits="userSpaceOnUse" height="50" width="50" x="0" y="20">
      <image x="0" y="0" height="50" width="50" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://via.placeholder.com/50x50">
      </image>
    </pattern>

    <!-- two colors for the number -->
    <linearGradient id="textcolor_594121ec06343" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="50%" stop-color="#ff0100"></stop>
      <stop offset="50%" stop-color="#0600c4"></stop>
      <stop offset="50%" stop-color="#0600c4"></stop>
      <stop offset="0" stop-color="#0600c4"></stop>
    </linearGradient>
  </defs>
  <rect class="cellImage" id="top" x="0" y="20" width="50" height="50" style="" fill="url(#image_594121ec06330)"></rect>
  <text class="number " x="50%" y="55%" alignment-baseline="middle" text-anchor="middle" fill="url(#textcolor_594121ec06343)">0</text>
</svg>

这是 jsfiddle 上的相同代码 https://jsfiddle.net/41s39p63/

我知道，如果用户使用的是 Firefox 或 Edge，但我不喜欢使用该解决方案，我知道可以通过更改某些 svg 属性以将数字放在中间的一些 if 条件来解决此问题。

有没有人可以帮助我解决这个问题，使其适用于所有浏览器？

Answer 1

Firefox 不支持对齐基线。您应该能够使用显性基线来获得相同的效果。