Svg shows different on Firefox and Edge

Question

I'm having some trouble with a svg image that has a number in the middle. It shows correct when using Chrome and other browsers but in Firefox and Edge the number gets wrong position. Link

Here is my code.

#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>

And here is the same code on jsfiddle https://jsfiddle.net/41s39p63/

I know this can be fixed by making some if-conditions that changes some svg attributes to place the number in the middle, if the user is on Firefox or Edge but I prefer not to use that solution.

Is there anyone out there who can help me with a solution to this issue so it works on all browsers?

Answer 1

Firefox does not support alignment-baseline. You should be able to use dominant-baseline instead to get the same effect.