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/

我知道这可以通过制作一些改变某些svg属性的if条件来修复，如果用户在Firefox或Edge上，但我不想使用该解决方案。

是否有人可以帮助我解决此问题，因此适用于所有浏览器？

Answer 1

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

Svg在Firefox和Edge上显示不同

1 个答案: