Svg在Firefox和Edge上显示不同

我在中间有一个数字的svg图像时遇到了一些问题。当使用Chrome浏览器和其他浏览器时，它显示正确，但在Firefox和Edge中，数字出现错误的位置。 Link Svg在Firefox和Edge上显示不同

这是我的代码。

#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属性放置在中间的数字，如果用户在Firefox或Edge上，但我不喜欢使用该解决方案。

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

来源

2017-06-14 Spock

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

来源

2017-06-14 12:51:28

谢谢，它解决了这个问题，但它弄乱了数字的颜色。 – Spock

显性基线对着色没有影响。您的渐变停止偏移量不合适，但可能会造成问题。 –

不，主导基线没有在Edge上工作。 – Spock

Svg在Firefox和Edge上显示不同

回答

相关问题